ホームページ > 記事 > ウェブフロントエンド > Ajaxで新しいJSPページにジャンプする方法（コード付き）
Ajaxで新しいJSPページにジャンプする方法（コード付き）
- php中世界最好的语言オリジナル
- 2018-03-30 17:22:382055ブラウズ
今回は、ajax で新しい JSP ページにジャンプする方法 (コード付き) を説明します。 ajax はページを部分的に更新できます。つまり、ページ全体を更新せずにページの部分的な情報を更新します。
プロジェクトで問題が発生しました。ユーザー リストでボタンをクリックすると、ユーザーの情報をクエリする必要があります。クエリが成功すると、ユーザーの詳細インターフェイスにジャンプします。プロンプトメッセージが元のページにポップアップ表示されます。
2 つの解決策を考えてください:
方法 1: ボタンをクリックして、ユーザー情報をクエリする通常のメソッドを呼び出します。クエリが成功した場合は、ユーザーの詳細ページにジャンプします。ユーザー リストをクエリするメソッドはリダイレクトされ、ユーザー リストをクエリするメソッドが完了すると、ユーザー リスト ページに戻り、プロンプト メッセージがポップアップ表示されます。これは、ユーザー リスト ページをリロードするのと同じです。方法 2:
要件に従って、ユーザーリストページをリロードできません。 ajax を使用してユーザーの詳細をクエリするメソッドを呼び出します。クエリが成功すると、ユーザーの Json 文字列が返されます。クエリが失敗すると、エラーが返されます。バックエンドメソッド: JSPページの
@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, "查询用户失败");
}
}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) 思いつく愚かな方法: 本体に隠しフォームを記述し、見つかったユーザーデータをコールバック関数内のフォームの入力にコピーし、フォームを送信して通常のメソッドにジャンプするため、 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> <form id="userForm" action="" method="post"> <input id="userFormJson" name="userFormJson" type="hidden"/> </form> </body>この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、注目してください。 PHP 中国語 Web サイトの他の関連記事へ! 推奨読書:
Ajax + サーブレットによるリフレッシュ不要のドロップダウンリンクの実装 (コード付き)
Ajax を使用して json データを未定義として取得する方法
以上がAjaxで新しいJSPページにジャンプする方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。