這次帶給大家ajax怎麼跳到新的jsp頁面（附程式碼），ajax跳到新的jsp頁頁的注意事項有哪些，下面就是實戰案例，一起來看一下。
ajax可以實現局部刷新頁面，即在不刷新整個頁面的情況下更新頁面的局部資訊。
專案中遇到一個問題：在使用者清單也，當點擊某個按鈕時需要去查詢使用者的信息，查詢成功跳到使用者詳情介面；查詢失敗，則在原頁面彈出提示訊息。
想到兩個解決方法：
方法一：
#點擊按鈕，呼叫普通方法去查詢用戶信息，查詢成功跳到用戶詳情頁面；查詢失敗，重定向調用查詢用戶列表的方法，在查詢用戶列表的方法結束後重新跳到用戶列表頁面並彈出提示信息，相當於重新加載了用戶列表頁面。
方法二：
根據需求，不可以重新載入使用者清單頁面。用ajax呼叫查詢使用者詳情的方法，查詢成功傳回使用者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 : {
查询用的数据，比如用户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）錯誤案例：
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方法提交的數據，並且可以跳到新頁面了：
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
<body>
<form id="userForm" action="" method="post">
<input id="userFormJson" name="userFormJson" type="hidden"/>
</form>
</body>
登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
實作無刷新下拉動連線的Ajax+Servlet（附程式碼）
ajax取得json數據為undefined應該如何使用
以上是ajax怎麼跳到新的jsp頁面（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
