A simple example of partial refresh using JQuery's Ajax request_jquery

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

Case: As shown in the figure



I want to change the status. After changing the icon using JQuery's Ajax, the icon changes. Partial refresh of the page

Principle: Partial refresh is part of refreshing the page. In this case, it is only the change of the icon. It separates the background code from the real icon of the front desk, and does not change the database. Re-do the query. Second, after the background digital display data is modified, the front-end directly changes the icon.

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

Copy code The code is as follows:

 




 

Ajax verification: add id = aUnread to the A tag, and then add the event

Copy code The code is as follows:

jQuery("#aUnread").click(function(){
var strIds="";//Define a variable to pass data
$(" input[name='checkbox']").each(function (){
if(this.checked){
strIds =this.value ",";//What you get is multiple id values, spell them out Pass to action
}
});
$.ajax({
} type: "post",
} dataType:'json', //Accept data format
cache:false,
data:"strIds=" strIds,
url: "${ctx}/feedbackonline/updateMessageStateUnread.action",
beforeSend: function(XMLHttpRequest){
             },
                                                                                                                                                                         var x="# r" str[p];//Get the icon id of the record to be changed
                                                                               Change the icon src attribute value of the corresponding id value to the path of the corresponding icon
}
},
error: function(){
alert("Error! ");
                                                                                                     
2. Background action:

Copy code The code is as follows:

private String strIds;//Omit the set get method and automatically obtain the response data from 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 a string array
str=jStr;//Split the string The string array is assigned to the array variable str with the get set method and returned to the page
for(int i=0;i int id=Integer.parseInt(jStr[i] );
messageUserinfo=messageUserinfoManager.queryById(id); }
return "ajax";
}