jquery Ajax Request for a simple instance of local refresh _jquery

Source: Internet
Author: User
Tags unique id

The parameter (data) passed by the requested Ajax path is received in the action by a variable of the same name (with the set Get method), and the returned data is an array of jquery objects that are involved in the called action. will be encapsulated in data and eventually returned to the page.

Case: As pictured



I want to implement the state change, with jquery Ajax changes after the icon changes, to achieve a partial refresh of the page

principle: Local Refresh is a part of the Refresh page, in this case, only the change of the icon, the background code and the foreground of the reality of the icon separation, not to the database to do the query, the second is the background digital data changes, the front desk directly change the icon.

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

Copy Code code as follows:

<TD align= "center" >
<s:if test= "messagestate = 0" >

</s:if>
<s:else>

</s:else>
</td>

Ajax Validation: Add the id= aunread to the a tag and add the event
Copy Code code 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+ ",";//gets multiple ID values, which are spelled 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) {
The Var str=data.str;//receives the returned data
For (var p in str) {//Traverse accepted Array Object
var x= "#r" +str[p];//gets the icon ID of the record to be changed
$ (x). attr ("src", "${ctx}/images/04.png");
Change the icon src attribute value of the corresponding ID value to the path of the corresponding icon
}
},
Error:function () {
Request Error Handling
Alert ("error!");
}
});
});

2. Background action:
Copy Code code as follows:

Private String strids;//omits the set get method to automatically obtain data for the response to the page
Private string[] str;//omit set Get method
@Action ("/updatemessagestateunread")
Public String updatemessagestate () throws exception{
string[] Jstr = Strids.split (",");//Split the string into an array of strings
str=jstr;//assigns a split string array to an array variable with a Get Set method, STR returns 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";
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.