When jquery encounters a JSON wow haha

Source: Internet
Author: User
Jquery : You must be familiar with it. Even if you haven't used it, you should have heard of it. If you don't know it, Google it.
JSON : A small and lightweight data format. In the Javascript world, XML is the perfect choice.
Jquery and JSON are widely used because they are both small and clever. If we get them together today, we should have no comments.

Now let's get down to the truth,
Pass this articleArticleYou can get the following benefits:
1. How does jqury use ajax to call the JSON data generated by the backend Asp.net page?
2. jquery simple Dom operations
3. Send a jquery development manual to you (for your research)

Preparations:
First, create a new website (. net2.0 ).
1. jquery JS files in our project.
2. Create an HTM file named dome.htm.
Code As follows: (The JS Code in the head area is all the Code implemented, with detailed comments)Code
<! 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 > Jquery JSON Data Acquisition demo page </ Title >
< Script Type = "Text/JavaScript" SRC = "JS/jquery-1.2.1.pack.js" > </ Script >
< Script Type = "Text/JavaScript" >
Function Getdata () {
$ ( " # List " Pai.html ( "" ); // Clear data in the list
// Send Ajax request
$. Getjson (
" Jsondata. ashx " , // Server Page for generating JSON data
{Name:"Test", Age:20} , // Query string sent to the server (this parameter is optional)
// Process the returned JSON data. In this example, the returned JSON data is displayed as a list.
Function (JSON) {
// The data in JSON is retrieved cyclically and displayed in the list.
$. Each (JSON, Function (I) {
$ ( " # List " ). Append ( " <Li> Name: " + JSON [I]. Name + " & Nbsp; age: " + JSON [I]. Age + " </LI> " )
} )
} )
}
</ Script >
</ Head >
< Body >
< Input ID = "Button1" Type = "Button" Value = "Getting data" Onclick = "Getdata ()"   />
< Ul ID = "List" > </ Ul >
</ Body >
</ Html >

3. Create another general application. Program (Jsondata. ashx)
The Code is as follows:Code
<% @ Webhandler Language = " C # " Class = " Jsondata "   %>

Using System;
Using System. Web;

Public   Class Jsondata: ihttphandler {

Public   Void Processrequest (httpcontext context) {
Context. response. contenttype =   " Text/plain " ;
String Data =   " [{Name :\ " Ants \ " , Age: 24}, {Name :\ " Lele \ " , Age: 23}] " ; // JSON data constructed
// The following two sentences are used to test the query characters that the foreground sends to this page.
String Querystrname = Context. Request. querystring. getvalues ( " Name " )[ 0 ]; // Obtain the namer value in the query string.
String Querystage = Context. Request. querystring. getvalues ( " Age " )[ 0 ]; // Obtains the age value in the query string.

Context. response. Write (data );
}
 
Public   Bool Isreusable {
Get {
Return False;
}
}

}

For the above content, I only want to say one thing, that is, in the front-end page$. Getjson Method 

$. Getjson (URL, Params, callback)
Request a javascript JSON data with an HTTP GET
Return Value:XMLHttpRequest
Parameters:
URL (string): the URL address of the loaded page.
Params (MAP): (optional) Key/value pair parameter sent to the server.
Callback (function): (optional) function executed when data loading is complete.

The following figure shows the successful running:
1. Running result

2. Background debugging data:

Well, this article is written here.
Attached jquery Development Manual: jqueryapi12.rar (this manual is based on jquery itself, very beautiful)

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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