Ajax implementation using jquery + JSON

In the process of using jquery + JSON, I did not notice a small problem,ProgramThere are always errors. I found many JSONArticleBut it is basically a simple example, so I think it is necessary to write a complete example of jquery + JSON to implement Ajax. If it can help others, it is the best. Otherwise, I should forget it for myself.

Okay, go to the question.

For more information about JSON, here are some simple descriptions of JSON data formats:

An object is a set of attributes and value pairs. An object starts with "{" and ends with "}". Use the ":" prompt for each attribute name and value, and separate the attributes.
An array is a set of ordered values. An array starts with "[", ends with "]", and values are separated.
The value can be a string, number, true, false, or null in quotation marks, or an object or array. These structures can be nested.
The definition of strings and numbers is basically the same as that of C or Java.
Next we use ajax to get the order list data and format it into JSON format and then output it. First, we create the data. ashx file as the data request processing page:

Data. ashx:

Arguments. orderquery query;
2
3 Public void processrequest (httpcontext context)
4 {
5 string cmd = context. Request. querystring ["_ cmd _"]; // command
6 string pagenum = context. Request. querystring ["_ pagenum _"]; // Number of pages
7 string type = context. Request. querystring ["_ type _"]; // type
8 result = new stringbuilder ();
9 If (cmd = NULL | cmd = string. Empty | type = NULL | type = string. Empty)
10 {
11 context. response. Write (result. tostring ());
12 return;
13}
14 switch (CMD)
15 {
16 case "getorder ":
17 query = new arguments. orderquery ();
18 query. status = new int [] {(INT) arguments. named. orderstatus. pending, (INT) arguments. named. orderstatus. being issued, (INT) arguments. named. orderstatus. new Order, (INT) arguments. named. orderstatus. completed };
19 query. timestart = datetime. parse ("00:00:00 ");
20 query. timeend = datetime. now;
21 query. pagesize = 25;
22 query. pageindex = webcommon. basal. convertint (pagenum)-1;
23 if (type = "Custom ")
24 {
25 query. Email = context. Request. querystring ["_ email _"];
26 query. ordercode = context. Request. querystring ["_ ordercode _"];
27}
28 else
29 {
30 query. Email = string. empty;
31 query. ordercode = string. empty;
32}
33
34 int recordnum = 0;
35 ilist <model. orderinfo> orderlist = webcommon. datasource. searchorderlist (query, ref recordnum );
36 formatjson (orderlist, recordnum); // You Can format the data in JSON format.
37 context. response. Write (result. tostring ());
38 break;
39}
40}
41
42 // <summary>
43 // construct the data in JSON format
44 // The format after the data is constructed is: {order: [{ordercode: 200901010001, status: order issued, createtime: 2009-1-1 1-1}], Count: 1}
45 /// </Summary>
46 private void formatjson (ilist <model. orderinfo> orderlist, int recordnum)
47 {
48 if (orderlist = NULL | orderlist. Count <= 0)
49 return;
50 result. append ("{order :[");
51 for (INT I = 0; I <orderlist. Count; I ++)
52 {
53 result. append ("{ordercode: \" "+ orderlist [I]. code + "\", status: \ "" + formatstatus (orderlist [I]. status) + "\", createtime: \ "" + orderlist [I]. createtime + "\"}");
54 if (I + 1) <orderlist. Count)
55 result. append (",");
56}
57 int pagenum = recordnum % 25> 0? (Recordnum/25) + 1: recordnum/25; // calculate the total number of pages
58 result. append ("], Count: \" "+ pagenum + "\"}");
59}

After the data processing page is written, we will write a front-end display page (display. aspx). On the page, we use the. getjson method provided by jquery to access the data page.

The prototype of jquery's getjson method: $. getjson (URL, {data: Data}, callbackfunction)

URL (string): The sending request address.

Data (MAP): (optional) Key/value parameter to be sent.

Callback (function): (optional) callback function when the load is successful.

Display. aspx:

Function getdata (I) // value method. Parameter I indicates the number of pages.
3 {
4 $. getjson ("data. ashx ",{__ cmd __:" getorder ",__ pagenum __: I. tostring () ,__ type __: "all"}, getordercallback );
5}
6
7 function getordercallback (data)
8 {
9 var result = data;
10 $ ("# taborderlist"). Empty ();
11 $. Each (result. Order, function (I) // cyclically obtain the data in the returned value order list
12 {
13 if (result. Order [I] = NULL)
14 return;
15 $ ("# taborderlist "). append ("<tr> <TD>" + result. order [I]. ordercode + "</TD> <TD>" + result. order [I]. status + "</TD> <TD>" + result. order [I]. createtime + "</TD> </tr> ");
16 });
17 $ ("# inptsum"). Val (result. Count); // retrieve the total number of pages from JSON
18}

 

Now, we can basically complete these two steps. Is it easy.

Because JSON is a subset of JavaScript, you will not be disappointed with the usage or execution efficiency.