JQuery's Ajax request implements a simple example of a local refresh

The parameters (data) passed by the ajax path of the request will be received in the action by a variable with the same name (with the set get method), the returned data is an array object of JQuery, and the data variables involved in the called action will be objects, which will be encapsulated in data and eventually returned to the page.

Case: as shown
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201402/20140211085425.png ">
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201402/20140211085436.png ">

I'm going to change the state, change the icon with JQuery Ajax, and refresh the page locally

Principle: Local refresh is a part of refreshing the page. In this case, what is realized is only the change of the icon, which separates the background code from the foreground real icon, rather than rechecking the database. Second, after the modification of the background digital display data, the foreground directly changes the icon.

1. The page gives each record icon a unique id value:

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

jQuery("#aUnread").click(function(){
       var strIds="";//Defines a variable that passes data
       $("input[name='checkbox']").each(function (){
        if(this.checked){
            strIds +=this.value+",";//You get multiple id values, spelt out as strings and passed to the action
       }
    });
     $.ajax({
              type: "post",
              dataType:'json', //Accept data format
              cache:false,
              data:"strIds="+strIds,
              url: "${ctx}/feedbackonline/updateMessageStateUnread.action",
              beforeSend: function(XMLHttpRequest){
              },
              success: function(data){
                  var str=data.str;//Receive the returned data
                  for(var p in str){ //Traverses the accepted array object
                    var x="#r"+str[p];//Gets the icon id of the record to change
                    $(x).attr("src","${ctx}/images/04.png");
//Change the SRC attribute value of the corresponding id value into the path of the corresponding icon
                  }
               },
              error: function(){
              //Request error handling
                  alert("Error!");
              }
       });
    });

private String strIds;//Omit the set get method to automatically get the data of the response passed to the page
private String[] str;//Omit the set get method
@Action("/updateMessageStateUnread")
    public String updateMessageState() throws Exception{
       String[] jStr = strIds.split(",");//Split the string into an array of strings
       str=jStr;//Assign the split array of strings to the array variable STR with the get set method and return it to the page
       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";
    }