jQuery's built-in AJAX function and JSON usage examples_jquery

Use the built-in AJAX function of jQuery to directly access the background to obtain data in JSON format, and then bind the data to the pre-designed html template through jQuer and display it directly on the page.
Let’s take a look at the html template first:

<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<th>
订单ID</th>
<th>
客户ID</th>
<th>
雇员ID</th>
<th>
订购日期</th>
<th>
发货日期</th>
<th>
货主名称</th>
<th>
货主地址</th>
<th>
货主城市</th>
<th>
更多信息</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>

What you must pay attention to is all the id attributes inside, this is a key. Let’s take a look at the code for AJAX request and data binding

$.ajax({
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: "BackHandler.ashx",//要访问的后台地址
data: "pageIndex=" + pageIndex,//要发送的数据
complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
success: function(msg){//msg为返回的数据，在这里做数据绑定
var data = msg.table;
$.each(data, function(i, n){
var row = $("#template").clone();
row.find("#OrderID").text(n.订单ID);
row.find("#CustomerID").text(n.客户ID);
row.find("#EmployeeID").text(n.雇员ID);
row.find("#OrderDate").text(ChangeDate(n.订购日期));
if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
row.find("#ShippedName").text(n.货主名称);
row.find("#ShippedAddress").text(n.货主地址);
row.find("#ShippedCity").text(n.货主城市);
row.find("#more").html("<a href=OrderInfo.aspx&#63;id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>"); 
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});

This is the AJAX method of jQuery. The returned data is not complicated. It mainly explains how to display the data on the page according to the definition of the template. The first is this "var row = $("#template").clone();" first copy the template, and then row.find("#OrderID").text(n. order ID);, indicating that it is found For the tag with id=OrderID, set its innerText to the corresponding data. Of course, it can also be set to data in html format. Or convert the data into the required format through external functions, such as here row.find("#OrderDate").text(ChangeDate(n. Order Date)); It feels a bit like a server control doing template binding data.
All of these are placed in a static page, and data is only obtained from the background through the AJAX method. All html codes are as follows:

 




 
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
<tr>
<th>
订单ID</th>
<th>
客户ID</th>
<th>
雇员ID</th>
<th>
订购日期</th>
<th>
发货日期</th>
<th>
货主名称</th>
<th>
货主地址</th>
<th>
货主城市</th>
<th>
更多信息</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>


LOADING....

PageData.js is the js that includes the above AJAX request and data binding code. The entire page does not even use a form. What are the benefits of doing so. Take a look at the following template

<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>

Also pay attention to the id attribute. Everyone should understand after seeing this that no matter what form of expression is used, as long as the id attribute is the same, the data can be bound to the corresponding location. In this case, those of us who make programs will not have to modify the code due to the modification of the artist, and the artist only needs to make HTML, and there is no need to make templates for the server controls (but I have not encountered such an artist, They are all designed by the artist and I will change them into server control templates).

Let’s briefly talk about the backend of the AJAX request. Access’s Northwind database is used. The order table is placed in the DataTable, and then converted into JSON data format through DataTable2JSON and sent back. However, some paging and caching are used in the backend. Method, I hope it will be of some help to beginners.