Ajax and JSON based on jquery to implement pure HTML data template _jquery

Through jquery's built-in AJAX capabilities, direct access to the background to obtain JSON-formatted data, and then through the Jquer data binding to the previously designed HTML template, directly on the page display.

Let's look at the HTML template first:

<table id= "Datas" border= "1" cellspacing= "0" style= "border-collapse:collapse" >
<tr>
<th>
order id</th>
<th>
customer id</th>
<th>
employee id</th>
<th>
Order Date </th>
<th>
ship date </th>
<th>
shipper name </th>
<th>
Shipper's address </th>
<th>
Shippers City </th>
<th>
More information </th>
</tr >
<tr id= "template" >
<td id= "OrderID" >
</td>
<td id= "CustomerID" >
</td>
<td id= "EmployeeID" >
</td>
<td id= "OrderDate" >
</td >
<td id= "ShippedDate" >
</td>
<td id= "Shippedname" >
</td>
<TD id= "shippedaddress" >
</td>
<td id= "shippedcity" >
</td>
<td id= "More" >
</td>
</tr>
</table>

It must be noted that all the ID attributes inside, this is a key. Take a look at the AJAX request and the code that binds the data.

 $.ajax ({type: "get",//Use the Get method to access the background dataType: "JSON",//returns the data URL in JSON format: "Backhandler.ashx
",//to access the background address data:" pageindex= "+ pageindex,//to be sent Complete:function () {$ (" #load "). Hide (),},//ajax hidden loading prompt upon completion of request Success:function (msg) {//msg for the returned data, here do the data-bound Var: msg.table, $.each (data, function (I, n) {var row = $ ("#template"). Cl
One ();
Row.find ("#OrderID"). Text (n. Order ID);
Row.find ("#CustomerID"). Text (n. Customer ID);
Row.find ("#EmployeeID"). Text (n. Employee ID);
Row.find ("#OrderDate"). Text (ChangeDate (n. Order date));
if (n. Ship date!== undefined) row.find ("#ShippedDate"). Text (ChangeDate (n. Ship date));
Row.find ("#ShippedName"). Text (n. Shipper name);
Row.find ("#ShippedAddress"). Text (n. Shipper's address);
Row.find ("#ShippedCity"). Text (n. Shipper city); Row.find ("#more"). HTML ("<a href=orderinfo.aspx?id=" + N. Order ID + "&pageindex= +pageindex+" > more</a 
> "); 
ROW.ATTR ("id", "Ready");//Change the ID row.appendto ("#datas") of the row that binds the data;//Add to the template's container}); 

This is the jquery Ajax method, the return data is not complex, mainly explain how the data according to the definition of the template to the page. The first is this "var row = $ (" #template "). Clone ();" Copy the template first, then Row.find ("#OrderID"). Text (n. Order ID), which indicates that the Id=orderid tag is found, the innertext of it is set to the appropriate data, and, of course, it can be formatted as HTML data. Or you can use an external function to convert the data to the desired format, such as Row.find here ("#OrderDate"). Text (ChangeDate (n. Order date)); Some server controls feel like template binding data.

All of these are placed on a static page, only through the Ajax method to get the data from the background, all the HTML code is as follows:

! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Pagedata.js is to include the above Ajax request and binding data code JS, the entire page even the form does not need to do so what is the benefit. And look at one of the following templates

<ul id= "Datas" >
<li id= "template" >
<span id= "OrderID" >
fsdfasdf
</span>
<span id= "CustomerID" >
</span>
<span id= "EmployeeID" >
</span>
< Span id= "OrderDate" >
</span>
<span id= "ShippedDate" >
</span>
<span ID = "Shippedname" >
</span>
<span id= "shippedaddress" >
</span>
<span id= "Shippedcity" >
</span>
<span id= "More" >
</span>
</li>
</ Ul>

Still pay attention to the id attribute. You see here should understand, no matter what form of expression, as long as the id attribute the same, you can bind the data to the corresponding location. In this way, we do the program will not be modified by the artist to modify the code, and art also as long as the HTML can be done, do not need to make a template for server controls (but I have not encountered such art, are art design I have to change to the server control template).

Let's say a little bit about the background of the AJAX request, using the Northwind database of access, putting the order form in the DataTable, Then through Datatable2json (www.baidu.com) into the JSON data format passed back to the end, but the background used some pagination and caching methods, I hope that some help for beginners.

Test.htm