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";

    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值