JQuery. getJSON (url, [data], [callback])
Load JSON data using http get requests.
Parameters
Url: the requested url.
Data: Key/value parameter to be sent.
Callback: callback function when the load is successful.
JQuery. getJSON provides the callback function, which has three parameters: responseText, textStatus, and XMLHttpRequest, which respectively represent the content, Request status, and XMLHttpRequest objects returned by the request.
[Javascript]
$. Get ("Data/GetServiceInfo. aspx", function (responseText, textStatus, XMLHttpRequest ){
// ResponseText: Content returned by the request
// TextStatus: Request status: success, error, notmodified, timeout
// XMLHttpRequest: XMLHttpRequest object
});
$. Get ("Data/GetServiceInfo. aspx", function (responseText, textStatus, XMLHttpRequest ){
// ResponseText: Content returned by the request
// TextStatus: Request status: success, error, notmodified, timeout
// XMLHttpRequest: XMLHttpRequest object
});
Instance (vs2010 ):
Client --
[Html]
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "JqueryAjaxGetJson. aspx. cs" Inherits = "JqueryAjaxTest. JqueryAjaxGetJson" %>
<! 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 runat = "server">
<Title> Jquery Ajax Test </title>
<% -- Introduce the Jquery library -- %>
<Script src = "Scripts/jquery-1.7.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
// Bind an event to the button
$ ("# TestGetJson"). bind ("click", GetJsonWithCallback );
});
// Test getJSON and use the callback function
// Note: The get () method provides the callback function (callback ),
// This function has three parameters, representing the content returned by the request, the Request status, and the XMLHttpRequest object.
Function GetJsonWithCallback (event ){
$. GetJSON ("Data/GetCity. aspx", {"resultType": "json"}, function (responseText, textStatus, XMLHttpRequest ){
$ ("# Result" cmd.html ("responseText. length: "+ responseText. length + "<br/>" + "responseText [0]. cityName: "+ responseText [0]. cityName );
});
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Input id = "TestGetJson" type = "button" value = "test jquery. getJSON"/>
<Div id = "result">
</Div>
</Div>
</Form>
</Body>
</Html>
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "JqueryAjaxGetJson. aspx. cs" Inherits = "JqueryAjaxTest. JqueryAjaxGetJson" %>
<! 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 runat = "server">
<Title> Jquery Ajax Test </title>
<% -- Introduce the Jquery library -- %>
<Script src = "Scripts/jquery-1.7.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
// Bind an event to the button
$ ("# TestGetJson"). bind ("click", GetJsonWithCallback );
});
// Test getJSON and use the callback function
// Note: The get () method provides the callback function (callback ),
// This function has three parameters, representing the content returned by the request, the Request status, and the XMLHttpRequest object.
Function GetJsonWithCallback (event ){
$. GetJSON ("Data/GetCity. aspx", {"resultType": "json"}, function (responseText, textStatus, XMLHttpRequest ){
$ ("# Result" cmd.html ("responseText. length: "+ responseText. length + "<br/>" + "responseText [0]. cityName: "+ responseText [0]. cityName );
});
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Input id = "TestGetJson" type = "button" value = "test jquery. getJSON"/>
<Div id = "result">
</Div>
</Div>
</Form>
</Body>
</Html>
Server --
[Csharp]
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Namespace JqueryAjaxTest. Data
{
Public partial class GetCity: System. Web. UI. Page
{
Private string resultType = "json ";
Protected void Page_Load (object sender, EventArgs e)
{
// Obtain the Request Parameters
If (! String. IsNullOrEmpty (Request. QueryString ["resultType"]) {
ResultType = Request. QueryString ["resultType"]. ToLower () = "html "? "Html": "json ";
}
String html = GetResult (resultType );
// Clear the buffer
Response. Clear ();
// Write the string to the response output stream
Response. Write (html );
// Send the Current Buffer output to the client and stop executing this page
Response. End ();
}
Private string GetResult (string resultType ){
String result = "";
If (resultType = "html "){
// Returned html
Result = @ "<ul> <li id =" 1 ""> Beijing </li> <li id = "2" "> Tianjin </li> </ul> ";
}
Else if (resultType = "json "){
// Return json data
Result = @"
[{"" Pkid "": "0001" "," "ProvinceId" ":" "BJ" "," "CityName" ":" "Beijing "", "" CityNameEn "": "" Beijing "", "" PostCode "": "" 010 "", "" isHotCity "": false },
{"" Pkid "": "0002" "," "ProvinceId" ":" "TJ" "," "CityName" ":" "Tianjin "", "" CityNameEn "": "" Tianjin "", "" PostCode "": "022" "," "isHotCity" ": false}]";
}
Return result;
}
}
}
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Namespace JqueryAjaxTest. Data
{
Public partial class GetCity: System. Web. UI. Page
{
Private string resultType = "json ";
Protected void Page_Load (object sender, EventArgs e)
{
// Obtain the Request Parameters
If (! String. IsNullOrEmpty (Request. QueryString ["resultType"]) {
ResultType = Request. QueryString ["resultType"]. ToLower () = "html "? "Html": "json ";
}
String html = GetResult (resultType );
// Clear the buffer
Response. Clear ();
// Write the string to the response output stream
Response. Write (html );
// Send the Current Buffer output to the client and stop executing this page
Response. End ();
}
Private string GetResult (string resultType ){
String result = "";
If (resultType = "html "){
// Returned html
Result = @ "<ul> <li id =" 1 ""> Beijing </li> <li id = "2" "> Tianjin </li> </ul> ";
}
Else if (resultType = "json "){
// Return json data
Result = @"
[{"" Pkid "": "0001" "," "ProvinceId" ":" "BJ" "," "CityName" ":" "Beijing "", "" CityNameEn "": "" Beijing "", "" PostCode "": "" 010 "", "" isHotCity "": false },
{"" Pkid "": "0002" "," "ProvinceId" ":" "TJ" "," "CityName" ":" "Tianjin "", "" CityNameEn "": "" Tianjin "", "" PostCode "": "022" "," "isHotCity" ": false}]";
}
Return result;
}
}
}
What is JSON? What is the difference with XML?
Although XML has been widely used in many applications, it is not perfect. Especially in AJAX applications, XMLHttpRequest checks the MIME type of the returned data, XMLHttpRequest runs XML Parser to parse the returned documents and build the corresponding DOM tree in the memory. Then, you can use the standard DOM method of JavaScript to operate the DOM tree. As we all know, DOM is not an efficient method. Another problem is that if you want to use JavaScript objects instead of XML data directly, you have to traverse the entire DOM tree to create the corresponding objects.
JSON is displayed in front of us.
JSON provides a standard data exchange format that is more suitable for AJAX applications. JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy to read and write. It is also easy to parse and generate machines.
Author; shan9liang
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
