請求的ajax路徑傳遞的參數(data)會到action中被一個同樣名字的變量(附帶set get方法)接收,返回的data是一個JQuery的數組對象,在被調用的action中涉及到的數據變量會對象,都會封裝到data中最終返回給頁面。
案例:如圖
我要實現狀態的更改,用JQuery的Ajax更改完之後圖標發生改變,實現頁面的局部刷新
原理:局部刷新是刷新頁面的一部分,在此案例中實現的只是圖標的改變,把後台代碼和前台現實的圖標分離,並不是對數據庫重新做查詢,二是後台數顯數據修改之後,前台直接改變圖標。
1.頁面 給每條記錄的圖標一個唯一的id值:
. 代碼如下:
<td align="center">
<s:if test="messageState == 0">
<img src="${ctx}/images/04.png" id="r${message.messageID}"/>
</s:if>
<s:else>
<img src="${ctx}/images/03.png" id="r${message.messageID}"/>
</s:else>
</td>
Ajax驗證:給A標簽添加的id= aUnread,再添加事件
. 代碼如下:
jQuery("#aUnread").click(function(){
var strIds="";//定義一個傳遞數據的變量
$("input[name='checkbox']").each(function (){
if(this.checked){
strIds +=this.value+",";//得到的是多個id值,拼成字符串傳到action
}
});
$.ajax({
type: "post",
dataType:'json', //接受數據格式
cache:false,
data:"strIds="+strIds,
url: "${ctx}/feedbackonline/updateMessageStateUnread.action",
beforeSend: function(XMLHttpRequest){
},
success: function(data){
var str=data.str;//接收返回的數據
for(var p in str){ //遍歷接受的數組對象
var x="#r"+str[p];//獲取要改變的記錄的圖標id
$(x).attr("src","${ctx}/images/04.png");
//把對應的id值的圖標src屬性值變成相應圖標的路徑
}
},
error: function(){
//請求出錯處理
alert("Error!");
}
});
});
2.後台action:
. 代碼如下:
private String strIds;//省略set get 方法,自動獲取到頁面傳的響應的數據
private String[] str;//省略set get 方法
@Action("/updateMessageStateUnread")
public String updateMessageState() throws Exception{
String[] jStr = strIds.split(",");//把字符串拆分成字符串數組
str=jStr;//把拆分的字符串數組賦給有get set方法的數組變量str返回到頁面上
for(int i=0;i<jStr.length;i++){
int id=Integer.parseInt(jStr[i]);
messageUserinfo=messageUserinfoManager.queryById(id);
messageUserinfo.setMessageState(0);
messageUserinfoManager.update(messageUserinfo);
}
return "ajax";
}