ajax跳轉到新的jsp頁面的方法

來源：懂視網責編：小采時間：2020-11-27 22:51:31

ajax跳轉到新的jsp頁面的方法

ajax跳轉到新的jsp頁面的方法:ajax可以實現局部刷新頁面，即在不刷新整個頁面的情況下更新頁面的局部信息。項目中遇到一個問題：在用戶列表也，當點擊某個按鈕時需要去查詢用戶的信息，查詢成功跳轉到用戶詳情界面；查詢失敗，則在原頁面彈出提示信息。想到兩個解決辦法：方法一：

推薦度：

點擊下載本文 文檔為doc格式

導讀ajax跳轉到新的jsp頁面的方法:ajax可以實現局部刷新頁面，即在不刷新整個頁面的情況下更新頁面的局部信息。項目中遇到一個問題：在用戶列表也，當點擊某個按鈕時需要去查詢用戶的信息，查詢成功跳轉到用戶詳情界面；查詢失敗，則在原頁面彈出提示信息。想到兩個解決辦法：方法一：

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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

ajax跳轉到新的jsp頁面的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法頁面跳轉

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

ajax跳轉到新的jsp頁面的方法

ajax跳轉到新的jsp頁面的方法

ajax跳轉到新的jsp頁面的方法

最新推薦

猜你喜歡

熱門推薦