ajax可以實現局部刷新頁面，即在不刷新整個頁面的情況下更新頁面的局部信息。
項目中遇到一個問題：在用戶列表也，當點擊某個按鈕時需要去查詢用戶的信息，查詢成功跳轉到用戶詳情界面；查詢失敗，則在原頁面彈出提示信息。
想到兩個解決辦法：
方法一：
點擊按鈕，調用普通方法去查詢用戶信息，查詢成功跳轉到用戶詳情頁面；查詢失敗，重定向調用查詢用戶列表的方法，在查詢用戶列表的方法結束后重新跳轉到用戶列表頁面並彈出提示信息，相當於重新加載了用戶列表頁面。
方法二：
根據需求，不可以重新加載用戶列表頁面。用ajax調用查詢用戶詳情的方法，查詢成功返回用戶Json串，查詢失敗則返回error。
后台方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function searchUser(){
$.ajax({
url :
"testurl/searchUser"
,
cache :
false
,
type :
'POST'
,
data : {
查詢用的數據，比如用戶ID
},
success : function(data) {
var obj = eval(
"("
+data+
")"
);
if
(obj.success==undefined){
//查詢成功，跳轉到詳情頁面
...
跳轉到用戶詳情處理方法，將date數據傳過去
...
}
else
if
(!obj.success){
//查詢失敗，彈出提示信息
weui.Loading.info(obj.message);
}
},
error : function(error) {
weui.alert(
"查詢用戶有誤！"
);
}
});
}
|
此處的重點在於如何在ajax的回調函數中調用普通方法，並將之前查詢出的用戶數據傳到普通方法中（上面偽代碼中紅色的部分），繼而跳轉到用戶詳情頁面。
（1）錯誤案例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function searchUser(){
$.ajax({
url :
"testurl/searchUser"
,
cache :
false
,
type :
'POST'
,
data : {
查詢用的數據，比如用戶ID
},
success : function(data) {
var obj = eval(
"("
+data+
")"
);
if
(obj.success==undefined){
//查詢成功，跳轉到詳情頁面，encodeURIComponent編碼是為了防止url后面傳送的參數中文亂碼,在后台處理時需要解碼
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方法，這會使得參數顯示的瀏覽器的url中，不安全，並且數據傳送的長度有限制。
（2）想到的笨方法：在body中寫隱藏的form表單，在回調函數中把查到的用戶數據復制給form表單中的input，然后提交表單跳轉到普通方法中，這樣就是以post方法提交的數據，並且可以跳轉到新頁面了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function searchUser(){
$.ajax({
url :
"testurl/searchUser"
,
cache :
false
,
type :
'POST'
,
data : {
查詢用的數據，比如用戶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
|
1
2
3
4
5
|
<body>
<form id=
"userForm"
action=
""
method=
"post"
>
<input id=
"userFormJson"
name=
"userFormJson"
type=
"hidden"
/>
</form>
</body>
|