您好,欢迎访问一九零五行业门户网

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

请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个jquery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面。
案例:如图
我要实现状态的更改,用jquery的ajax更改完之后图标发生改变,实现页面的局部刷新
原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改变图标。
1.页面 给每条记录的图标一个唯一的id值:
复制代码 代码如下:
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           int id=integer.parseint(jstr[i]);
           messageuserinfo=messageuserinfomanager.querybyid(id);
           messageuserinfo.setmessagestate(0);
           messageuserinfomanager.update(messageuserinfo);        
       }  
       return ajax;
    }
其它类似信息

推荐信息