JQuery的Ajax请求实现局部刷新的简单实例
时间:2024-05-02 17:05:17
请求的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";
}
标签:JQuery,Ajax,局部刷新
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python实现图片筛选程序
2021-06-25 07:24:32
python使用tcp传输图片数据
2023-08-09 06:33:48
![](https://img.aspxhome.com/file/2023/6/86616_0s.jpg)
Git在Windows中安装与使用教程
2023-11-01 08:47:55
![](https://img.aspxhome.com/file/2023/5/67205_0s.png)
sql server查询语句阻塞优化性能
2024-01-25 00:44:52
可以自动轮换的页签 tabs
2008-02-21 12:25:00
python通过SSH登陆linux并操作的实现
2022-11-02 09:30:56
手把手教你在Python里使用ChatGPT
2023-11-10 02:55:58
![](https://img.aspxhome.com/file/2023/9/75339_0s.jpg)
Linux下安装Python3和django并配置mysql作为django默认服务器方法
2023-11-15 01:04:44
Python对称的二叉树多种思路实现方法
2022-09-12 17:27:10
解读! Python在人工智能中的作用
2022-02-20 20:51:54
python 实现手机自动拨打电话的方法(通话压力测试)
2021-03-19 08:10:34
ajax代理程序,自动判断字符编码
2007-11-04 13:17:00
python实现决策树分类
2021-04-04 13:35:28
![](https://img.aspxhome.com/file/2023/7/94067_0s.png)
python中正则表达式的使用方法
2021-08-14 09:36:59
解决python使用list()时总是报错的问题
2021-11-27 23:34:36
![](https://img.aspxhome.com/file/2023/0/131550_0s.jpg)
python实现音乐播放和下载小程序功能
2023-07-03 17:59:03
![](https://img.aspxhome.com/file/2023/5/105855_0s.jpg)
Jar包一键重启的Shell脚本及新服务器部署的一些经验分享
2023-06-24 19:01:08
Python NumPy库安装使用笔记
2022-05-20 17:49:56
python在linux环境下安装skimage的示例代码
2023-05-24 12:57:25
python爬取微博评论的实例讲解
2022-01-10 19:53:14