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

 更新时间:2014年02月11日 08:56:47   作者:  
本篇文章只要是对JQuery的Ajax请求实现局部刷新的简单实例进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

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

相关文章

  • Jsonp 跨域的原理以及Jquery的解决方案

    Jsonp 跨域的原理以及Jquery的解决方案

    JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。
    2011-06-06
  • jQuery遍历json的方法(推荐)

    jQuery遍历json的方法(推荐)

    这篇文章主要介绍了jQuery遍历json的方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery实现新消息在网页标题闪烁提示

    jQuery实现新消息在网页标题闪烁提示

    这篇文章主要介绍了jQuery实现新消息在网页标题闪烁提示的相关资料,需要的朋友可以参考下
    2015-06-06
  • jQuery验证插件validate使用详解

    jQuery验证插件validate使用详解

    这篇文章主要为大家详细介绍了jQuery验证插件validate的使用方法,jQuery.validate.js插件用于对表单输入进行验证,对验证插件感兴趣的小伙伴们可以参考一下
    2016-05-05
  • jquery 正整数数字校验正则表达式

    jquery 正整数数字校验正则表达式

    本文主要介绍了jquery正整数数字校验正则表达式的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 在一个页面实现两个zTree联动的方法

    在一个页面实现两个zTree联动的方法

    最近发现项目中很多地方都是树形菜单,而这些树形菜单都是使用树形插件zTree来制作的,下面这篇文章主要给大家介绍了关于在一个页面实现两个zTree联动的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-12-12
  • toggle()隐藏问题的解决方法

    toggle()隐藏问题的解决方法

    一个实例中使用到toggle函数,但是调用的时候会把元素隐藏掉,经搜索终于找到了原因,需要的朋友可以参考下
    2014-02-02
  • jquery实现红色竖向多级向右展开的导航菜单效果

    jquery实现红色竖向多级向右展开的导航菜单效果

    这篇文章主要介绍了jquery实现红色竖向多级向右展开的导航菜单效果,涉及jquery鼠标hover事件结合class样式动态添加与删除的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery学习笔记之创建DOM元素

    jQuery学习笔记之创建DOM元素

    这篇文章主要介绍了jQuery学习笔记之创建DOM元素的相关资料,需要的朋友可以参考下
    2015-01-01
  • 使用jquery.form.js实现图片上传的方法

    使用jquery.form.js实现图片上传的方法

    这篇文章主要介绍了使用jquery.form.js实现图片上传的方法,涉及jquery使用表单插件jquery.form.js进行图片上传的提交、类型验证、执行结果回调显示等技巧,非常简单实用,需要的朋友可以参考下
    2016-05-05

最新评论