ホームページ  >  記事  >  ウェブフロントエンド  >  JQuery の Ajax request_jquery を使用した部分リフレッシュの簡単な例

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

WBOY
WBOYオリジナル
2016-05-16 17:00:51937ブラウズ

リクエストの 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";
}


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。