ajax可以實現(xiàn)局部刷新頁面，即在不刷新整個頁面的情況下更新頁面的局部信息。
項目中遇到一個問題：在用戶列表也，當點擊某個按鈕時需要去查詢用戶的信息，查詢成功跳轉到用戶詳情界面；查詢失敗，則在原頁面彈出提示信息。
想到兩個解決辦法：
方法一：
點擊按鈕，調(diào)用普通方法去查詢用戶信息，查詢成功跳轉到用戶詳情頁面；查詢失敗，重定向調(diào)用查詢用戶列表的方法，在查詢用戶列表的方法結束后重新跳轉到用戶列表頁面并彈出提示信息，相當于重新加載了用戶列表頁面。
方法二：
根據(jù)需求，不可以重新加載用戶列表頁面。用ajax調(diào)用查詢用戶詳情的方法，查詢成功返回用戶Json串，查詢失敗則返回error。
后臺方法：
@RequestMapping(value = "searchUser")
public void searchHome(HttpServletResponse response){
String result = null;
...
查詢用戶的方法
...
if(查詢成功){
result = JsonUtil.objectToJson(查詢結果對象);//結果對象轉化成Json字符串，在ajax的結果中跳轉到用戶詳情的處理方法
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){//查詢成功，跳轉到詳情頁面
...
跳轉到用戶詳情處理方法，將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中紅色的部分），繼而跳轉到用戶詳情頁面。
（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){//查詢成功，跳轉到詳情頁面，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ù)復制給form表單中的input，然后提交表單跳轉到普通方法中，這樣就是以post方法提交的數(shù)據(jù)，并且可以跳轉到新頁面了：
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){//查詢成功，跳轉到詳情頁面
$("#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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- JS中Select下拉列表類(支持輸入模糊查詢)功能
- AngularJS使用ngOption實現(xiàn)下拉列表的實例代碼
- JS設置下拉列表框當前所選值的方法
- js實現(xiàn)下拉列表選中某個值的方法(3種方法)
- jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
- JS實現(xiàn)支持多選的遍歷下拉列表代碼
- 使用JS模擬錨點跳轉的實例
- js實現(xiàn)微信/QQ直接跳轉到支付寶APP打開口令領紅包功能
- JSP頁面跳轉方法大全
- JS動態(tài)添加的div點擊跳轉到另一頁面實現(xiàn)代碼
- JS實現(xiàn)點擊下拉列表文本框中出現(xiàn)對應的網(wǎng)址,點擊跳轉按鈕實現(xiàn)跳轉
