JQuery's built-in AJAX function and JSON usage example _ jquery

Use jQuery's built-in AJAX function to access the background to obtain JSON-format data, and then display the data directly on the page through jQuer. If you need it, refer to the built-in AJAX function of jQuery, directly access the background to obtain data in JSON format, and then bind the data to the pre-designed html template through jQuer, which is directly displayed on the page.
Let's take a look at the html template:

 
 

  
  
 
   
 
    
Order ID
 
    
Customer ID
 
    
Employee ID
 
    
Order Date
 
    
Date of shipment
 
    
Owner name
 
    
Cargo owner address
 
    
Cargo owner City
 
    
More information
 
   
 
   
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
   
 
  
 
 

All the id attributes are important. Let's take a look at the AJAX request and data binding code.

$. Ajax ({type: "get", // use the get method to access the background dataType: "json", // return the json format Data url: "BackHandler. ashx ", // the backend address to be accessed data:" pageIndex = "+ pageIndex, // The data to be sent complete: function () {$ (" # load "). hide () ;}, // when the AJAX request is complete, hide the loading prompt success: function (msg) {// msg as the returned data. Bind var data = msg here. table; $. each (data, function (I, n) {var row = $ ("# template "). clone (); row. find ("# OrderID "). text (n. order ID); row. find ("# CustomerID "). text (n. customer ID); row. fi Nd ("# EmployeeID "). text (n. employee ID); row. find ("# OrderDate "). text (ChangeDate (n. order Date); if (n. delivery date! = Undefined) row. find ("# ShippedDate "). text (ChangeDate (n. delivery Date); row. find ("# ShippedName "). text (n. goods owner name); row. find ("# ShippedAddress "). text (n. cargo Master Address); row. find ("# ShippedCity "). text (n. cargo Main City); row. find ("# more" detail .html ("More"); row. attr ("id", "ready"); // Changes the idrow of the row bound to the data. appendTo ("# datas"); // Add it to the container of the template });

This is jQuery's AJAX method, and the returned data is not complex. It mainly describes how to display the data to the page according to the template definition. The first is the "var row = $ (" # template "). clone (); "first copy the template, and then row. find ("# OrderID "). text (n. order ID);, indicating to find the tag id = OrderID, set its innerText as the corresponding data, of course, you can also set it to html format data. Or use external functions to convert the data into the required format, for example, row. find ("# OrderDate "). text (ChangeDate (n. order Date); a bit of server controls do the feeling of template binding data.
All of these are put in a static page, and only the AJAX method is used to obtain data from the background. All the html code is as follows:

Test1