首页 / JQUERY / JQuery的Ajax请求实现局部刷新的简单实例_jquery

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JQuery的Ajax请求实现局部刷新的简单实例_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2234字，纯文字阅读大概需要4分钟。

内容图文

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

案例：如图
JQuery的Ajax请求实现局部刷新的简单实例_jquery - 文章图片
JQuery的Ajax请求实现局部刷新的简单实例_jquery - 文章图片

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

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

1.页面 给每条记录的图标一个唯一的id值：

代码如下:



JQuery的Ajax请求实现局部刷新的简单实例_jquery - 文章图片


JQuery的Ajax请求实现局部刷新的简单实例_jquery - 文章图片



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","");
//把对应的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";
}

内容总结

以上是互联网集市为您收集整理的JQuery的Ajax请求实现局部刷新的简单实例_jquery全部内容，希望文章能够帮你解决JQuery的Ajax请求实现局部刷新的简单实例_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/319744.html

来源：【匿名】