jquery method of parsing JSON-formatted data (object, String) _jquery

Source: Internet
Author: User
Tags eval

The example in this article describes the way jquery parses JSON-formatted data. Share to everyone for your reference, specific as follows:

JSON data is one of our common small data real-time exchange of things, he can use jquery or JS to parse, I will introduce the jquery parsing JSON string method.

jquery parses JSON data format:

Using this method, you must set the parameters in the AJAX request:

DataType: "JSON"

Get the data returned by the callback function and parse to get the value we want, see source code:

Jquery.ajax ({ 
url:full_url, 
dataType: "JSON", 
success:function (results) { 
alert (result.name); 
});

Typically, you can return JSON data from the background, and the front desk is given to jquery, haha!!

The jquery asynchronous request sets the type (typically this configuration property) to "JSON", or uses the $.getjson () method to get the server back, so no eval () method is required, because the result is already a JSON object, and simply call the object directly, Here take the $.getjson method as an example

Example 1

The code is as follows:

var data= ' 
{ 
root: 
[ 
{name: ' 1 ', Value: ' 0 '}, 
{name: ' 6101 ', Value: ' Beijing '}, 
{name: ' 6102 ', Value: ' Tianjin '}, 
{name: ' 6103 ', Value: ' Shanghai '}, 
{name: ' 6104 ', Value: ' Chongqing '}, 
{name: ' 6105 ', Value: ' Weinan '}, 
{name: ' 6106 ', Value: ' Yanan '}, 
{name: ' 6107 ', Value: ' Hanzhong '}, 
{name: ' 6108 ', Value: ' Yulin '}, 
{name: ' 6109 ', Value: ' Ankang '}, 
{name: ' 6110 ', Value: ' Shangluo '} 
] 
};

Jquery

$.getjson ("http://www.jb51.net/", {param: "sanic"},function (data) { 
//The data returned here is already a JSON object 
//The following other operations with the first case 
$.each (data.root,function (idx,item) { 
if (idx==0) { 
return true;//with Countinue, returns false with break 
} 
alert ("Name: +item.name+", Value: "+item.value);}";} 
); 

jquery Parsing JSON objects:

jquery provides another way to "Parsejson", which requires a standard JSON string and returns the generated JavaScript object. Let's take a look at the syntax:

Copy Code code as follows:
Data = $.parsejson (string);

See how it is applied to the actual development:

Jquery.ajax ({ 
url:dataurl, success:function (results) { 
var Parsedjson = Jquery.parsejson (results); 
alert (parsedjson.name); 
} 
});

Add:

jquery parses full instance of JSON data:

var data= ' {root: [{name: ' 1 ', Value: ' 0 '}, {name: ' 6101 ', Value: ' Beijing '}, {name: ' 6102 ', Value: ' Tianjin '}, {name: ' 6103 ', Valu E: ' Shanghai '}, {name: ' 6104 ', Value: ' Chongqing '}, {name: ' 6105 ', Value: ' Weinan '}, {name: ' 6106 ', Value: ' Yanan '}, {name: ' 6107 ', Value: ' 
Hanzhong '}, {name: ' 6108 ', Value: ' Yulin '}, {name: ' 6109 ', Value: ' Ankang '}, {name: ' 6110 ', Value: ' Shangluo '}]} ';
Data is a string type to convert the string type to the JSON data type var jsondatas=eval ("(" +data+ ")"); $.each (Jsondatas.root,function (i,n) {alert ("name" +n.name+ "value" +n.value);})//The following array type string is converted to JSON string resolution// JSON string var jsondata= ' [{name: ' 1 ', Value: ' 0 '}, {name: ' 6101 ', Value: ' XI ' an '}, {name: ' 6102 ', Value: ' Tongchuan '}, {name: ' 6103 ', Value: ' Baoji '}, {name: ' 6104 ', Value: ' Xianyang '}, {name: ' 6105 ', Value: ' Weinan '}, {name: ' 6106 ', Value: ' Yanan '}, {name: ' 6107 ',
Value: ' Hanzhong '}, {name: ' 6108 ', Value: ' Yulin '}, {name: ' 6109 ', Value: ' Ankang '}, {name: ' 6110 ', Value: ' Shangluo '}] ';
var json=eval (Jsondata);
$.each (Json,function (i,n) {alert (json[i].name); alert (json[i].value);//According to index value}); JSON data characters do not need to convert var json={"Products": [{"OrderID": "11077"," CustomerID ":" RATTC "}, {" OrderID ":" 11078 "," CustomerID ":" Ratt "}]," IMG ": [{" id ":" 12345 "," url ":" Image/1.jpg "}]}; $.each (JSON.

 Products,function (i,n) {alert (N.orderid);})

General processing files (HANDLER.ASHX)

if (context. Request.querystring[' method ']!= null) {string method = context. Request.querystring["Method"]. 
   ToString (); if (method = = "GetList") {string str = configurationmanager.connectionstrings["ConnectionString"]. 
    ConnectionString; 
    SqlConnection conn = new SqlConnection (str); Conn. 
    Open (); 
    SqlCommand cmd = new SqlCommand (); Cmd. 
    Connection = conn; 
    Cmd.commandtext = "Select Proid,proname,url from Project where adress = ' Harbin '"; 
    DataSet ds = new DataSet (); 
    SqlDataAdapter da = new SqlDataAdapter (cmd); Da. 
    Fill (DS); String sb = Createjsonparameters (ds. 
    Tables[0]); Context. 
    Response.clearcontent (); Context. Response.Write (sb.) 
    ToString ()); Context. 
   Response.End (); {}}///<summary>///build JSON string///</summary>///<param name= "DT" ></param>/// <returns></returns> public string createjsonparameters (DataTable dt) {System.Text.StringBuilder SB = n EW System. 
  Text.stringbuilder (); if (dt!= null && dt. Rows.Count > 0) {sb. 
   Append ("["); for (int i = 0; i < dt. Rows.Count; i++) {sb. 
    Append ("{"); for (int j = 0; j < dt.) Columns.count; J + +) {//If the value is not the last one, add a comma-delimited if (J < DT). columns.count-1) {sb. Append ("/") + dt. COLUMNS[J]. Columnname.tostring () + "/": "+"/"" + dt. ROWS[I][J]. 
     ToString () + "/", "); ///If the value is the last character, do not add a comma else if (j = = dt. columns.count-1) {sb. Append ("/") + dt. COLUMNS[J]. Columnname.tostring () + "/": "+"/"" + dt. ROWS[I][J]. 
     ToString () + "/" "); }///If the last value is not added comma if (i = = dt. rows.count-1) {sb. 
    Append ("}"); } else {sb. 
    Append ("},"); } sb. 
   Append ("]"); Return SB. 
  ToString (); 
 else {return null;} }
$.ajax
  (
  {
   type: "POST",
   URL: "Handler.ashx?method=getlist",
   async:false,//true = asynchronous false = Synchronous
   contentType: "Application/json",
   dataType: ' json ',
   success:function (result) {
   var temp=eval ( result);
   Parse the return array string for
   (var i = 0; i < temp.length i++) 
   { 
    o.innerhtml = = "Project name:" + result[i]. Proname + "<br/> URL: <a href=" + result[i].url + "mce_href=" + Result[i].url + "target= ' _blank ' >" + result[i]. URL + "</a><br/>";
    Datas + = "Project name:" + result[i]. Proname + "<br/> URL: <a href=" + result[i].url + "mce_href=" + Result[i].url + "target= ' _blank ' >" + result[i]. URL + "</a><br/>";
   }
    TINY.box.show (datas, 0, 0, 0, 1);
   }
);

I hope this article will help you with the jquery program design.

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.