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


Posted in Javascript onFebruary 11, 2014

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

案例:如图
JQuery的Ajax请求实现局部刷新的简单实例
JQuery的Ajax请求实现局部刷新的简单实例

我要实现状态的更改,用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";
    }
Javascript 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
web前端开发也需要日志
Dec 09 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
javascript页面加载完执行事件代码
Feb 11 #Javascript
JS图像无缝滚动脚本非常好用
Feb 10 #Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 #Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 #Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 #Javascript
js判断undefined类型示例代码
Feb 10 #Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 #Javascript
You might like
数据库查询记录php 多行多列显示
2009/08/15 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python 开发Activex组件方法
2009/11/08 Python
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python常用编译器原理及特点解析
2020/03/23 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
如何把python项目部署到linux服务器
2020/08/26 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
物流经理自我评价
2013/09/23 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
国际贸易实训总结
2015/08/03 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android