JQuery的Ajax请求实现局部刷新的简单实例

时间：2016.04.18 发布人：cdmingpian
JQuery的Ajax请求实现局部刷新的简单实例

已解决问题

谷歌cdmingpian用户在2016.04.18提交了关于“万古神帝JQuery的Ajax请求实现局部刷新的简单实例”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-27T09:18:29。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，你是我的宝贝,你是我的花,谢谢你对我的帮助！

希望以下的回答，能够帮助你。

第1个回答

用户名：porima520  

请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带setget方法)接收，返回的data是一个JQuery的数组对象，在被调用的action中涉及到的**变量会对象，都会封装到data中最终返回给页面。

案例：如图



我要实现状态的更改，用JQuery的Ajax更改完之后图标发生改变，实现页面的局部刷新

原理：局部刷新是刷新页面的一部分，在来自此案例中实现的只是图标的改变，把后台代码和前台现实的图标分离，并不是对**库重新做查询，二是后台数显**修改之后领矛本待跳顾查高，前台直接改变图标。

1.页面给每条记录的图标一个唯一的id值讨府息木：
复制代码代码如下研附办报女层区即翻村:
<tdalign="center">
<s:iftest="messageState==0">
<imgsrc="${ctx}/images/04.pn331215问答g"id="r${mes盐清进端失见sage.messageID}"/>
</s:if>
<s:else>
<imgsrc="${ctx}/images/03.png"id="r${message.messageID}"/>
</预担回料去飞几终呀接s:else>
</td>

Ajax验：末未实换给少厂拿际给A标签添加的id=aUnread，再添加事件
复制代码代码天击如下:
jQuery("#aU研异对鸡nread").c仅州而提分朝进保lick(function(){
varstrIds="";//定义一个传递**的变量
$普协检送自分职展散("input[name='checkbox']").each(function(){
if(this.checked)怎景许光味笑史鲜施钱{
strIds+=this.value+",";//得到的是多个id值，拼成字符串传到action
}
});
$造个轴.ajax({
type:"post",
d增类哥仅ataType:'json',//接受**格式
c云小味航投ache:false,
d从里ata:"strIds="+strIds,
url:"${ctx}/feedbackonline/updateMessageStateUnread.action",
b的于季父激画罪普受eforeSend:function(XMLh**ttpRequest){
},
s相神春原快林见uccess:function(data){
varstr=data.str;//接收返回的**
for(varpinstr){//遍历接受的数组对象
varx="#r"+str[p];//获取要改变的记录的图标id
$(x).attr("src","${ctx}/images/04.png");
//把对应的id值的图标src属性值变成相应图标的路径
}
},
error:function(){
//请求出错处理
alert("Error!");
}
});
});

2.后台action:
复制代码代码如下:
privateStringstrIds;//省略setget方法，自动获取到页面传的响应的**
privateString[]str;//省略setget方法
@Action("/updateMessageStateUnread")
publicStringupdateMessageState()throwsException{
String[]jStr=strIds.split(",");//把字符串拆分成字符串数组
str=jStr;//把拆分的字符串数组赋给有getset方法的数组变量str返回到页面上
for(inti=0;i<jStr.length;i++){
intid=Integer.parseInt(jStr[i]);
messageUserinfo=messageUserinfoManager.queryById(id);
messageUserinfo.setMessageState(0);
messageUserinfoManager.update(messageUserinfo);
}
return"ajax";
}