Home > Developer > Ajax

JQuery-based AJAX and JSON instances

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Using jQuery's built-in AJAX function, you can directly access the background to obtain JSON-format data, and then bind the data to the pre-designed html template through jQuer, which is displayed directly on the page.

Let's take a look at the html template: <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>
Date of shipment </th>
<Th>
Goods owner name </th>
<Th>
Cargo Master Address </th>
<Th>
Cargo Main 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>

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 data in json format
Url: "BackHandler. ashx", // background address to be accessed
Data: "pageIndex =" + pageIndex, // data to be sent
Complete: function () {$ ("# load"). hide () ;}, // hide the loading prompt when the AJAX request is complete
Success: function (msg) {// msg is the returned data. Bind The data here.
Var data = msg. 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. find ("# EmployeeID"). text (n. employee ID );
Row. find ("# OrderDate"). text (ChangeDate (n. Order Date ));
If (n. date of shipment! = Undefined) row. find ("# ShippedDate"). text (ChangeDate (n. date of shipment ));
Row. find ("# ShippedName"). text (n. goods owner name );
Row. find ("# ShippedAddress"). text (n. Cargo Master Address );
Row. find ("# ShippedCity"). text (n. Main City );
Row. find ("# more" rows .html ("<a href = OrderInfo. aspx? Id = "+ n. Order ID +" & pageindex = "+ pageIndex +"> & nbsp; More </a> ");
Row. attr ("id", "ready"); // change the id of the row bound to the data.
Row. appendTo ("# datas"); // Add it to the template container
});

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:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> test1 </title>

<Script language = "javascript" type = "text/javascript" src = "js/jquery-latest.pack.js"> </script>

<Script language = "javascript" type = "text/javascript" src = "js/PageDate. js"> </script>

</Head>
<Body>
<Div>
& Nbsp; <div>
<Br/>
<Input id = "first" type = "button" value = "<"/> <input id = "previous" type = "button"
Value = "<"/> <input id = "next" type = "button" value = ">"/> <input id = "last" type = "button"
Value = ">"/>
& Nbsp; <span id = "pageinfo"> </span>
<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>
Date of shipment </th>
<Th>
Goods owner name </th>
<Th>
Cargo Master Address </th>
<Th>
Cargo Main 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>
</Div>
<Div id = "load" style = "left: 0px; position: absolute; top: 0px; background-color: red">
LOADING ....
</Div>
<Input type = "hidden" id = "pagecount"/>
</Div>
</Body>
</Html>

PageData. js is the js that includes the above AJAX request and bound data code. The whole page is not used for form. What are the advantages of this operation. Let's 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>

Pay attention to the id attribute. As you can see, no matter what kind of representation is used, you can bind the data to the corresponding location as long as the id attribute is the same. In this way, we will not modify the code because of the changes made by the artist, and the artist only needs to make html, you do not need to create a template for the server control (but I have never met such an artist. I have designed a template for changing it to a server control ).

Simply put, the background of the AJAX request uses the Access Northwind database, puts the order table in the able, and then converts the order table to the JSON data format through DataTable2JSON, however, some paging and caching methods are used in the background, hoping to help beginners.

Download all the examples at http://files.cnblogs.com/fredlau/json.rar.

References: http://files.cnblogs.com/fredlau/JSON.pdf

 

From: http://www.cnblogs.com/fredlau/archive/2008/08/12/1266089.html

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery replace all instances ajax php json php ajax json ajax json php codeigniter ajax json example php ajax return json ajax json array example
Related Article
JQuery AJAX Timeout Timeout problem detailed _jquery
The difference between traditional web development patterns a...
JQuery ajax File Download _ajax
Ajax various implementation methods compare _ajax
Ajax Getting Started Guide (ii)
SPRINGMVC passing a parameter list object through Ajax or pas...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More