jquery generates a DIV container with an ID of "rating".

We need some server-side code, this example uses a PHP file, reads the rating parameter and then returns the total number of rating and the average. Take a look at the rate.php code.
Although these examples can also be implemented without Ajax, but show that we do not do so, we use jquery to generate a div container, the ID is "rating".

$ (document). Ready (function () {
Generate markup
var ratingmarkup = ["Lease rate:"];
for (var i=1; I <= 5; i++) {
Ratingmarkup[ratingmarkup.length] = "<a href= ' # ' >" + i + "</a>";
}
Add markup to container and applier click Handlers to Anchors
$ ("#rating"). Append (Ratingmarkup.join (")). Find (" a "). Click (function (e) {
E.preventdefault ();
Send requests
$.post ("rate.php", {rating: $ (this). html ()}, function (XML) {
Format result
var result = [
"Thanks for rating, current average:",
$ ("average", XML). Text (),
", Number of votes:",
$ ("Count", XML). Text ()
];
Output result
$ ("#rating"). HTML (Result.join ("));
} );
});
});

This code generates 5 links and appends them to the ID "rating" container, and when one of the links is clicked, The scores indicated by the link are sent to rate.php in the form of the rating parameter, and the results are then returned as XML from the server side and added to the container instead of the links.

If you don't have a PHP-installed webserver, you can take a look at this online example.
Examples that do not use JavaScript implementations can access the softonic.de2881064151bewerten! "

More Ajax methods can be found here, or see the API documentation under Ajax filed under Ajax.

(Translator Note: This online instance from the domestic access or relatively slow, click to wait a moment to see the results, you can consider to modify it, such as adding loading, vote after the return of the vote and then back link. In addition, there are a lot of places in this example that need to be digested, please refer to the API documentation for the areas you don't understand.

A common problem that occurs when loading content with Ajax is that when loading an event handle into an HTML document, you also need to apply these events to the loading content, and you have to apply these event handles after the content is loaded, in order to prevent code recurrence, You might use one of the following function:

$ (function () {
var addclickhandlers = function () {
$ ("A.clickmetoloadcontent"). Click (function () {
$ ("#target"). Load (this.href, addclickhandlers);
});
};
Addclickhandlers ();
});

Addclickhandlers now executes only once DOM loading is complete, after each user clicks on a link with the clickmetoloadcontent style and the content is loaded.

Note that the Addclickhandlers function is defined as a local variable, not as a global variable (such as function addclickhandlers () {...}), to prevent conflicts with other global variables or functions.

Another common problem is the parameters of the callback (callback). You can specify the callback method with an additional parameter, and the simple way is to include the callback method in one of the other function:

Get some data
var foobar = ...;
Specify handler, it needs data as a paramter
var handler = function (data) {
...
};
Add click handler and pass foobar!
$ (' a '). Click (Function (event) {handler (foobar);});

If you need the context of the original handler, use apply:
$ (' a '). Click (Function (event) {handler.apply (this, [Foobar]);});

With the use of simple Ajax, we can think that it has been very "web2.0", but until now, we still lack some cool effect. These effects will be discussed in the next section.

jquery generates a DIV container with an ID of "rating".