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 相关文章推荐
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
iview实现图片上传功能
Jun 29 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 empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
php实例化一个类的具体方法
2019/09/19 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
深入解析Python编程中super关键字的用法
2016/06/24 Python
python 编码规范整理
2018/05/05 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python双向循环链表实现方法分析
2018/07/30 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python3 求约数的实例
2019/12/05 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python二元算术运算常用方法解析
2020/09/15 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
高中生学习的自我评价
2013/12/14 职场文书
军训心得体会
2013/12/31 职场文书
工作人员思想汇报
2014/01/09 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
四则混合运算教学反思
2016/02/23 职场文书