ホームページ > 記事 > バックエンド開発 > Ajax を使用して新しい JSP ページにジャンプする方法を共有する

Ajax を使用して新しい JSP ページにジャンプする方法を共有する

小云云オリジナル: 2017-12-25 09:26:362432ブラウズ

ajax はページを部分的に更新できます。つまり、ページ全体を更新せずにページの部分的な情報を更新します。この記事では、ページ全体を更新せずに、ページの一部の情報を更新する方法を主に紹介します。興味のある方は参考にしてください。

プロジェクトで問題が発生しました。ユーザーリストでボタンをクリックすると、ユーザーの情報を照会する必要があります。クエリが成功すると、ユーザーの詳細インターフェイスにジャンプします。プロンプトメッセージが元のページにポップアップ表示されます。

2 つの解決策を考えてください:

方法 1:

ボタンをクリックして、ユーザー情報をクエリする通常のメソッドを呼び出します。クエリが成功した場合は、ユーザーの詳細ページにジャンプします。失敗した場合、リダイレクト呼び出しはユーザーリストメソッドをクエリします。ユーザーリストのクエリメソッドが終了した後、ユーザーリストページに戻り、プロンプトメッセージをポップアップします。これは、ユーザーリストページをリロードするのと同じです。

方法 2:

要件に従って、ユーザーリストページをリロードできません。 ajax を使用してユーザーの詳細をクエリするメソッドを呼び出します。クエリが成功すると、ユーザーの Json 文字列が返されます。クエリが失敗すると、エラーが返されます。

バックグラウンドメソッド:

@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) 思いつく愚かな方法: 本体に隠しフォームを書き、見つかったユーザーデータをコールバック関数でフォームの入力にコピーし、フォームを送信して通常のメソッドにジャンプする、これは 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>
  <form id="userForm" action="" method="post">
    <input id="userFormJson" name="userFormJson" type="hidden"/>
  </form>
</body>

Ajax を使用して新しい JSP ページにジャンプする方法を共有する

関連記事