JQuery的Ajax请求实现局部刷新 小案例

请求的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";

}