jquery provides a number of Ajax functions, which are similar in that they are separated from each other in order to handle different types of data. The simplest is get (url,parameters,callback), which initiates a got request to pass the data returned by the server to callback processing. The following example implements an AJAX request when the mouse hovers over a hyperlink, returning the effect of more information about the hyperlink from the server side. Look at the server-side code first, create a new ajaxload.ashx, just as an example, get the value of the query parameter to Word, and return:
Copy Code code as follows:
<%@ 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 ("<p style= ' color:red; ') >more intorduction of {0} is here....</p> ", word));
}
public bool IsReusable {
get {
return false;
}
}
}
The foreground code is as follows:
Copy Code code as follows:
<title>ajax text</title>
<script type= "Text/javascript" src= "Jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' a '). Hover (function (event) {
$.get (' ajaxload.ashx ', {word: $ (event.target). html ()}, function (data) {
$ (' #result '). HTML (data);
});
}, function () {
$ (' #result '). HTML ("");
});
});
</script>
<body>
<a href= "javascript:void (0)" >china</a><br/>
<a href= "javascript:void (0)" >usa</a><br/>
<a href= "javascript:void (0)" >japan</a><br/>
<a href= "javascript:void (0)" > China </a><br/>
<div id= "Result" >
</div>
</body>
By sliding the mouse over Japan and China, you can see clearly that two get requests were made in Firebug. jquery encodes the parameters and passes them to the server. With the help of jquery, Ajax is so simple.
In this example, the server side returned an HTML fragment, the job of the front desk is to insert the HTML fragment into the page, in fact, the server can return the data in any format, as long as the corresponding processing in the foreground. In a variety of data formats, the JSON format is particularly common. About the JSON format itself, this article does not do more introduction. Simply put, the JSON format is very similar to the literal number of objects in JavaScript. {} represents an object, [] represents an array.
Below to implement a three-level linkage drop-down menu. First look at the final effect:
This is a bundled sales merchandise selector, first select the first attribute game, then select Server, and finally select amount. How the server side finds the right data from the database and how to serialize it to JSON data is not the focus of this article. The server side can respond to the following request, and the returned data can be seen, which is the typical format of JSON:
The first request returns the list of game, the second request returns the list of servers, and the third is slightly more complex, returning a lot of information, where DisplayName is used to display the list, the ID is the value of the list, and the rest is not used. For example:
Copy Code code as follows:
Amount:<select name= "Selectamount" id= "Selectamount" ><option value= ">10 Mil</option>"
<option value= ">20 mil</option></select>"
The implementation of the foreground is described below. The HTML code for the Drop-down list box is as follows:
Copy Code code as follows:
<div id= "Bannerlivechat_content" >
<p>
Game:<select id= "Selectgame" ></select></p>
<p>
Server:<select id= "Selectserver" ></select></p>
<p>
Amount:<select id= "Selectamount" name= "Selectamount" ></select></p>
<p>
<asp:button id= "Buttonfasybuy" cssclass= "Btn_default" runat= "Server" text= "BuyNow"
onclick= "Buttonfasybuy_click"/>
</p>
</div>
To write the event handler for the three Drop-down lists, first load the game list:
Copy Code code as follows:
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 empty the current list, the $.each function can traverse each value in the first argument, and then call the function of the second argument. and pass the value to the entry parameter. At this point jquery has parsed the JSON data into a JavaScript object, which is an array of strings. function Loadserver (game) {
Copy Code code as follows:
$.getjson (' Fastbuy.ashx ', {game:game},function (data) {
var sel = $ (' #SelectServer ') [0];
sel.innerhtml = "";
$.each (data, function (Entryindex, entry) {
var op = new Option (entry);
Sel.options.add (OP);
});
$ (' #SelectServer ') [0].selectedindex = 0;
Loadamount (game, $ (' #SelectServer '). Val ());
});
}
The process of loading server data is similar.
Copy Code code as follows:
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 is the load amount, here a little bit different, at this time data is not a simple string, but a Property object, you can use an expression such as entry[' ID ' to get an expression. In this case, the 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 simply register the processing function for the Drop-down list in the Ready function:
Copy Code code as follows:
$ (document). Ready (function () {
$ (' #SelectServer '). Change (function () {
Loadamount ($ (' #SelectGame '). Val (), $ (' #SelectServer '). Val ());
});
$ (' #SelectGame '). Change (function () {
Loadserver ($ (' #SelectGame '). Val ());
});
Loadgame ();
});
At this point, a three-level linkage Drop-down list completed.
jquery also has a $.post function that uses the same as get, except that it initiates a POST request.
