提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery实例AJAX 实现 简单 请求 刷新 局部
2023-06-13 09:15:17 时间

请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带setget方法)接收，返回的data是一个JQuery的数组对象，在被调用的action中涉及到的数据变量会对象，都会封装到data中最终返回给页面。

案例：如图



我要实现状态的更改，用JQuery的Ajax更改完之后图标发生改变，实现页面的局部刷新

原理：局部刷新是刷新页面的一部分，在此案例中实现的只是图标的改变，把后台代码和前台现实的图标分离，并不是对数据库重新做查询，二是后台数显数据修改之后，前台直接改变图标。

1.页面给每条记录的图标一个唯一的id值：

复制代码代码如下:

<tdalign="center">
   <s:iftest="messageState==0">
<imgsrc="${ctx}/images/04.png"id="r${message.messageID}"/>
   </s:if>
<s:else>
       <imgsrc="${ctx}/images/03.png"id="r${message.messageID}"/>
   </s:else>
</td>

Ajax验证：给A标签添加的id=aUnread，再添加事件
复制代码代码如下:

jQuery("#aUnread").click(function(){
      varstrIds="";//定义一个传递数据的变量
      $("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){
                 varstr=data.str;//接收返回的数据
                 for(varpinstr){//遍历接受的数组对象
                   varx="#r"+str[p];//获取要改变的记录的图标id
                   $(x).attr("src","${ctx}/images/04.png");
//把对应的id值的图标src属性值变成相应图标的路径
                 }
              },
             error:function(){
             //请求出错处理
                 alert("Error!");
             }
      });
   });

2.后台action:
复制代码代码如下:
privateStringstrIds;//省略setget方法，自动获取到页面传的响应的数据
privateString[]str;//省略setget方法
@Action("/updateMessageStateUnread")
   publicStringupdateMessageState()throwsException{
      String[]jStr=strIds.split(",");//把字符串拆分成字符串数组
      str=jStr;//把拆分的字符串数组赋给有getset方法的数组变量str返回到页面上
      for(inti=0;i<jStr.length;i++){
          intid=Integer.parseInt(jStr[i]);
          messageUserinfo=messageUserinfoManager.queryById(id);
          messageUserinfo.setMessageState(0);
          messageUserinfoManager.update(messageUserinfo);        
      }  
      return"ajax";
   }

相关文章