ajax可以實(shí)現(xiàn)局部刷新頁(yè)面，即在不刷新整個(gè)頁(yè)面的情況下更新頁(yè)面的局部信息。
項(xiàng)目中遇到一個(gè)問(wèn)題：在用戶列表也，當(dāng)點(diǎn)擊某個(gè)按鈕時(shí)需要去查詢用戶的信息，查詢成功跳轉(zhuǎn)到用戶詳情界面；查詢失敗，則在原頁(yè)面彈出提示信息。
想到兩個(gè)解決辦法：
方法一：
點(diǎn)擊按鈕，調(diào)用普通方法去查詢用戶信息，查詢成功跳轉(zhuǎn)到用戶詳情頁(yè)面；查詢失敗，重定向調(diào)用查詢用戶列表的方法，在查詢用戶列表的方法結(jié)束后重新跳轉(zhuǎn)到用戶列表頁(yè)面并彈出提示信息，相當(dāng)于重新加載了用戶列表頁(yè)面。
方法二：
根據(jù)需求，不可以重新加載用戶列表頁(yè)面。用ajax調(diào)用查詢用戶詳情的方法，查詢成功返回用戶Json串，查詢失敗則返回error。
后臺(tái)方法：
@RequestMapping(value = "searchUser")
public void searchHome(HttpServletResponse response){
String result = null;
...
查詢用戶的方法
...
if(查詢成功){
result = JsonUtil.objectToJson(查詢結(jié)果對(duì)象);//結(jié)果對(duì)象轉(zhuǎn)化成Json字符串，在ajax的結(jié)果中跳轉(zhuǎn)到用戶詳情的處理方法
AjaxUtil.ajax(response,result);
}else{//查詢失敗，返回提示信息
AjaxUtil.error(response, "查詢用戶失敗");
}
}
jsp頁(yè)面的ajax：
function searchUser(){
$.ajax({
url : "testurl/searchUser",
cache : false,
type : 'POST',
data : {
查詢用的數(shù)據(jù)，比如用戶ID
},
success : function(data) {
var obj = eval("("+data+")");
if(obj.success==undefined){//查詢成功，跳轉(zhuǎn)到詳情頁(yè)面
...
跳轉(zhuǎn)到用戶詳情處理方法，將date數(shù)據(jù)傳過(guò)去
...
}else if(!obj.success){//查詢失敗，彈出提示信息
weui.Loading.info(obj.message);
}
},
error : function(error) {
weui.alert("查詢用戶有誤！");
}
});
}
此處的重點(diǎn)在于如何在ajax的回調(diào)函數(shù)中調(diào)用普通方法，并將之前查詢出的用戶數(shù)據(jù)傳到普通方法中（上面?zhèn)未a中紅色的部分），繼而跳轉(zhuǎn)到用戶詳情頁(yè)面。
（1）錯(cuò)誤案例：
function searchUser(){
$.ajax({
url : "testurl/searchUser",
cache : false,
type : 'POST',
data : {
查詢用的數(shù)據(jù)，比如用戶ID
},
success : function(data) {
var obj = eval("("+data+")");
if(obj.success==undefined){//查詢成功，跳轉(zhuǎn)到詳情頁(yè)面，encodeURIComponent編碼是為了防止url后面?zhèn)魉偷膮?shù)中文亂碼,在后臺(tái)處理時(shí)需要解碼
window.location.href = "testurl/userForm?userJson="+encodeURIComponent(data);
}else if(!obj.success){//查詢失敗，彈出提示信息
weui.Loading.info(obj.message);
}
},
error : function(error) {
weui.alert("查詢用戶有誤！");
}
});
}
錯(cuò)誤原因：window.location.href方法為get方法，這會(huì)使得參數(shù)顯示的瀏覽器的url中，不安全，并且數(shù)據(jù)傳送的長(zhǎng)度有限制。
（2）想到的笨方法：在body中寫隱藏的form表單，在回調(diào)函數(shù)中把查到的用戶數(shù)據(jù)復(fù)制給form表單中的input，然后提交表單跳轉(zhuǎn)到普通方法中，這樣就是以post方法提交的數(shù)據(jù)，并且可以跳轉(zhuǎn)到新頁(yè)面了：
function searchUser(){
$.ajax({
url : "testurl/searchUser",
cache : false,
type : 'POST',
data : {
查詢用的數(shù)據(jù)，比如用戶ID
},
success : function(data) {
var obj = eval("("+data+")");
if(obj.success==undefined){//查詢成功，跳轉(zhuǎn)到詳情頁(yè)面
$("#userFormJson").val(data);
$("#userForm").attr("action","testurl/userForm");
$("#userForm").submit();
}else if(!obj.success){//查詢失敗，彈出提示信息
weui.Loading.info(obj.message);
}
},
error : function(error) {
weui.alert("查詢用戶有誤！");
}
});
}
jsp頁(yè)面的body
body>
form id="userForm" action="" method="post">
input id="userFormJson" name="userFormJson" type="hidden"/>
/form>
/body>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- JS中Select下拉列表類(支持輸入模糊查詢)功能
- AngularJS使用ngOption實(shí)現(xiàn)下拉列表的實(shí)例代碼
- JS設(shè)置下拉列表框當(dāng)前所選值的方法
- js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法(3種方法)
- jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- JS實(shí)現(xiàn)支持多選的遍歷下拉列表代碼
- 使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例
- js實(shí)現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開(kāi)口令領(lǐng)紅包功能
- JSP頁(yè)面跳轉(zhuǎn)方法大全
- JS動(dòng)態(tài)添加的div點(diǎn)擊跳轉(zhuǎn)到另一頁(yè)面實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)點(diǎn)擊下拉列表文本框中出現(xiàn)對(duì)應(yīng)的網(wǎng)址,點(diǎn)擊跳轉(zhuǎn)按鈕實(shí)現(xiàn)跳轉(zhuǎn)
