jQuery provides several ajax functions. They are similar but separated to process different types of data. The simplest is get(url, parameters, callback). This function initiates a GET request and passes the data returned by the server to the callback for processing. The following example implements the effect of initiating an ajax request when the mouse hovers over a hyperlink and returning more information about the hyperlink from the server. First look at the server-side code, create a new ajaxload.ashx, just as an example, get the value of the query parameter word, and return:
<%@ WebHandler Language="C#" Class="ajaxload" %> using System; using System.Web; public class ajaxload : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string word = context.Request.Params["word"]; context.Response.Write(string.Format("
More intorduction of {0} is here....
",word)); } public bool IsReusable { get { return false; } } }
Slide the mouse over Japan and China in sequence. You can clearly see in firebug that two get requests were initiated. jquery encodes the parameters and passes them to the server. Ajax is so easy with the help of jQuery.
In this example, the server returns an html fragment. The front-end job is to insert this html fragment into the page. In fact, the server can return data in any format. , just do the corresponding processing at the front desk. Among various data formats, JSON format is particularly commonly used. Regarding the JSON format itself, this article will not introduce much. Simply put, the JSON format is very similar to object literals in JavaScript. {} represents an object, [] represents an array.
Let’s implement a three-level linkage drop-down menu. Let’s take a look at the final effect:
This is a bundled product selector. First select the first attribute Game, then select Server, and finally select Amount. How the server side finds the appropriate data from the database and serializes it into JSON data is not the focus of this article. The server can respond to the following requests, and the returned data can also be seen. These are the typical formats of JSON:
The first request returns a list of Game, the second request returns a list of Server, and the third request is a little more complicated and returns a lot of information. DisplayName is used to display in the list, and ID is the value of the list. , the rest are not used. For example:
function LoadGame() { $.getJSON('FastBuy.ashx' , function(data) { var sel = $('#SelectGame')[0]; sel.innerHTML = ""; $.each(data, function(entryIndex, entry) { var op = new Option(entry); sel.options.add(op); }); $('#SelectGame')[0].selectedIndex = 0; var game = $('#SelectGame').val(); LoadServer(game); }); }
First clear the current list, $.each The function can iterate through each value in the first parameter and call the function of the second parameter in turn. And pass the value to the entry parameter. At this point jQuery has parsed the JSON data into a javascript object, here it is an array of strings. function LoadServer(game) {
function LoadAmount(game, server) { $ .getJSON('FastBuy.ashx', {Game:game,Server:server}, function(data) { var sel = $('#SelectAmount')[0]; sel.innerHTML = "" ; $.each(data, function(entryIndex, entry) { var op = new Option(entry['AmountAttr'], entry['ID']); sel.options.add( op); }); }); }
Finally, the Amount is loaded. There is a slight difference here. The data in data is not a simple string at this time. Instead, it is an object with attributes. You can use an expression such as entry['ID'] to get the expression. In this example, entry[‘ID‘] is a simple number. Of course it can be another complex object or array, depending on the JSON data returned by the server. With these preparations, we only need to register the processing function for the drop-down list in the ready function:
At this point, a three-level linkage drop-down order is completed. jQuery also has a $.post function, which is used the same as get, except that it initiates a post request.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn