首頁 > 文章 > 後端開發 > 關於ajax跳到新的jsp頁面的方法分享

關於ajax跳到新的jsp頁面的方法分享

小云云原創: 2017-12-25 09:26:362382瀏覽

ajax可以實現局部刷新頁面，即在不刷新整個頁面的情況下更新頁面的局部資訊。本文主要介紹了ajax跳到新的jsp頁面的方法，在不刷新整個頁面的情況下更新頁面的局部信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。

專案中遇到一個問題：在使用者清單也，當點擊某個按鈕時需要去查詢使用者的信息，查詢成功跳到使用者詳情介面；查詢失敗，則在原頁面彈出提示訊息。

想到兩個解決方法：

方法一：

點擊按鈕，呼叫普通方法去查詢用戶信息，查詢成功跳轉到用戶詳情頁面；查詢失敗，重定向調用查詢用戶列表的方法，在查詢用戶列表的方法結束後重新跳轉到用戶列表頁面並彈出提示信息，相當於重新加載了用戶列表頁面。

方法二：

根據需求，不可以重新載入使用者清單頁面。用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 : &#39;POST&#39;,
        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 : &#39;POST&#39;,
        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 : &#39;POST&#39;,
        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>

關於ajax跳到新的jsp頁面的方法分享

相關文章