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

前端技术 2023/09/05 JavaScript

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

本文地址：https://www.stayed.cn/item/14277

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案