SSH:请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面(JQuery实际返回的是一个复杂的集合(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";
}
- 大小: 42.9 KB
- 大小: 14.2 KB
分享到:
相关推荐
综上所述,使用jQuery和ajax实现局部刷新,可以帮助开发者提高web应用的响应速度和用户体验。通过文中提供的两种方法,我们可以根据实际项目需求,选择适合的实现方式。这些技术的使用,不仅限于个人学习,更是当前...
本知识点将重点介绍如何使用jQuery库配合AJAX技术来实现局部页面的定时刷新。主要涉及的技术包括: - **jQuery**:一个快速、简洁的JavaScript库,极大地简化了HTML文档的操作、事件处理、动画等任务。 - **AJAX**...
案例:如图我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库...
总结,jQuery为实现页面局部刷新提供了强大的工具,通过AJAX请求获取数据,然后结合DOM操作方法更新页面内容。结合良好的编程习惯和优化策略,可以创建出响应迅速、用户体验优良的Web应用。在实际项目中,可以根据...
### 使用jQuery与Ajax实现网页无刷新提交功能 在现代Web开发中,为了提供更好的用户体验,很多网站都会采用Ajax技术来实现在不刷新整个页面的情况下进行数据的提交与更新。本篇文章将详细介绍如何利用jQuery库结合...
本文主要介绍如何使用php和jQuery ajax技术实现网页数据的实时刷新显示。具体来说,就是通过JavaScript的定时器,每隔一定时间就向服务器发送请求,获取最新的数据,然后在前端页面上实时更新这些数据,以实现数据的...
本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...
本篇文章将深入探讨如何结合Ajax和jQuery来实现无刷新效果。 首先,Ajax的核心在于创建异步通信,允许后台与服务器进行数据交换而不必重新加载整个页面。这主要依赖于浏览器的XMLHttpRequest对象,但直接操作这个...
在这个“Struts2+jQuery实现局部刷新”的主题中,我们将探讨如何利用这两者的优势来实现页面的无刷新更新。 1. **Struts2框架介绍**: Struts2是一个基于MVC设计模式的Java Web框架,它提供了良好的结构和可扩展性...
综上所述,Ajax技术在JSP中实现局部刷新,能够显著提升网页的交互性和用户体验,尤其适用于实时更新内容的场景,如视频播放评论区。通过掌握Ajax的使用和原理,开发者可以创建出更加动态、高效的Web应用。
然而,在使用`.ajax`进行局部刷新后,有时会出现JavaScript无法正确调用的问题,这主要涉及到DOM(文档对象模型)更新、作用域以及事件绑定等问题。下面将详细探讨这个问题及其解决方案。 ### 1. DOM更新问题 当`....
在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...
本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...
2. **AJAX(Asynchronous JavaScript and XML)**:AJAX允许网页在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。在图片上传中,AJAX可以实现在后台处理文件上传,而不会打断用户的界面体验。 ...
本教程将探讨如何使用jQuery的AJAX功能实现页面局部刷新,同时结合MySQL数据库和Struts2框架实现高效的分页功能。 首先,jQuery AJAX是JavaScript库jQuery提供的一种异步数据通信方式,它允许我们在不刷新整个页面...
"jqueryAjax_无刷新调用另一页实例"这个标题意味着我们将探讨如何利用jQuery的AJAX功能实现页面的动态加载。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及AJAX交互。...
【ASP + JqueryAjax + Access 无刷新分页】是一种网页开发技术,它结合了ASP(Active Server Pages)后端处理、JqueryAjax前端异步通信以及Access数据库的数据存储,以实现网页数据的动态加载,无需整个页面刷新,...
开发者可以使用Jquery的Ajax方法来发起请求,监听Ajax事件,如`start`、`progress`、`complete`等,根据服务器返回的进度信息动态更新进度条的状态。 在前端实现过程中,可能包含以下步骤: 1. 使用Jquery选择器...