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