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

所属分类: 网络编程 / JavaScript 阅读数: 907
收藏 0 赞 0 分享

请求的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";
    }

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多