JQuery の Ajax request_jquery を使用した部分リフレッシュの簡単な例-jsチュートリアル-php.cn

JQuery の Ajax request_jquery を使用した部分リフレッシュの簡単な例

WBOY

リリース： 2016-05-16 17:00:51

オリジナル

980 人が閲覧しました

リクエストの ajax パスによって渡されたパラメーター (データ) は、アクション内の同じ名前の変数 (set get メソッドを使用) によって受信されます。返されるデータは、JQuery 配列オブジェクトであり、データ変数とオブジェクトはデータにカプセル化され、最終的にページに返されます。

例: 図のように

JQueryのAjaxを使用してアイコンを変更した後、アイコンが変更されます。ページが部分的に更新されます

。

原則: 部分更新は、ページの更新の一部であり、アイコンの実際のアイコンから背景コードを分離するだけです。次に、バックグラウンドのデジタル表示データが変更された後、フロントエンドはアイコンを直接変更します。

1. このページでは、各レコードのアイコンに一意の ID 値が与えられます:

コードをコピーコードは次のとおりです。

< ;img src ="${ctx}/images/03.png" id="r${message.messageID}"/>

Ajax 検証: A タグに id = aUnread を追加し、イベント

コードをコピーを追加しますコードは次のとおりです:

jQuery("#aUnread").click(function(){
var strIds="";//変数を定義します。 pass data
$(" input[name='checkbox']").each(function (){
if(this.checked){
strIds =this.value ",";//What取得するのは複数の ID 値であり、それらをスペルアウトします。アクションに渡します
}
});
$.ajax({
} type: "post",
} dataType:'json' , //データ形式を受け入れる
cache:false,
data:"strIds=" strIds,
url:"${ctx}/フィードバックオンライン/updateMessageStateUnread.action",
beforeSend: function(XMLHttpRequest) ){
},
var x="# r" str[p];// 変更するレコードのアイコン ID を取得します
対応する id 値の icon src 属性値を対応するアイコンのパス
}
}、
エラー：function（）{
alert（ "error！"）;

2. バックグラウンドアクション:

コードをコピーしますコードは次のとおりです:

private String strIds;//set get メソッドを省略し、ページから応答データを自動的に取得します
private String[] str;//set get メソッドを省略します
@Action("/updateMessageStateUnread ")
 public String updateMessageState() throws Exception{
 String[] jStr = strIds.split(",");//文字列を文字列配列に分割します
 str=jStr;// string 文字列配列は get set メソッドで配列変数 str に代入され、ページ 
 for(int i=0;i int id=Integer.parseInt( jStr[i] ); 
 messageUserinfo=messageUserinfoManager.queryById(id); } 
 return "ajax";
 } 