ajax跳轉到新的jsp頁面(局部重新整理)

來源:互聯網
上載者:User

標籤:success   hidden   瀏覽器   add   data   form表單   result   成功   處理   

ajax可以實現局部重新整理頁面,即在不重新整理整個頁面的情況下更新頁面的局部資訊。項目中遇到一個問題:在使用者列表也,當點擊某個按鈕時需要去查詢使用者的資訊,查詢成功跳轉到使用者詳情介面;查詢失敗,則在原頁面彈出提示資訊。想到兩個解決辦法: 方法一:點擊按鈕,調用普通方法去查詢使用者資訊,查詢成功跳轉到使用者詳情頁面;查詢失敗,重新導向調用查詢使用者列表的方法,在查詢使用者列表的方法結束後重新跳轉到使用者列表頁面並彈出提示資訊,相當於重新載入了使用者列表頁面。 方法二:根據需求,不可以重新載入使用者列表頁面。用ajax調用查詢使用者詳情的方法,查詢成功返回使用者Json串,查詢失敗則返回error。     後台方法:     ?
1234567891011121314 @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:    ?
123456789101112131415161718192021222324 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)錯誤案例:?
123456789101112131415161718192021 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方法提交的資料,並且可以跳轉到新頁面了:?
1234567891011121314151617181920212223 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?
12345 <body>    <form id="userForm" action="" method="post">        <input id="userFormJson" name="userFormJson" type="hidden"/>    </form></body>

  

ajax跳轉到新的jsp頁面(局部重新整理)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.