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)