源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-07-19 05:11 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JQuery的Ajax请求实现局部刷新的简单实例
请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面。 [b]案例:如图 [/b][img]http://files.jb51.net/file_images/article/201402/20140211085425.png[/img] [img]http://files.jb51.net/file_images/article/201402/20140211085436.png[/img] 我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 [b]原理:[/b]局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改变图标。 [b]1.页面 给每条记录的图标一个唯一的id值: [/b]
[u]复制代码[/u] 代码如下:
<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>
[b]Ajax验证:给A标签添加的id= aUnread,再添加事件 [/b]
[u]复制代码[/u] 代码如下:
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!");               }        });     });
[b]2.后台action: [/b]
[u]复制代码[/u] 代码如下:
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";     }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部