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字符编码函数区别分析
Dec 28 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
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
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
JS中的三个循环小结
2017/06/20 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python合并多个装饰器小技巧
2015/04/28 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python注释详解
2016/06/01 Python
Python协程的用法和例子详解
2017/09/09 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
查看django版本的方法分享
2018/05/14 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
如何利用find命令查找文件
2016/11/18 面试题
人事部主管岗位职责
2013/12/26 职场文书
分公司任命书
2014/06/06 职场文书
辞职信如何写
2015/02/27 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python