How jquery reads json parameters-JS Tutorial-php.cn

How jquery reads json parameters

coldplay.xixi

Release： 2023-01-04 09:36:34

Original

4714 people have browsed it

How jquery reads json parameters: 1. Use jQuery to parse the Json data format, and set the parameter [dataType: "json"] in the Ajax request; 2. Use jQuery to parse the Json object, the code is [data = $.parseJSON string].

How jquery reads json parameters

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.

Recommended: jquery video tutorial

How to read json parameters with jquery:

1. jQuery parsing Json data format:

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

dataType: "json"

Get the data returned through the callback function and parse it to get the value we want. See the source code:

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

Copy after login

Normally, you can return JSON data from the background and leave the frontend to jQuery.

jquery asynchronous request sets the type (usually this configuration attribute) to "json", or uses the $.getJSON() method to obtain the server return, then there is no need for eval () method, because the result obtained at this time is already a json object, you only need to call the object directly. Here is the $.getJSON method as an example

Example 1

The code is as follows:

var data=" 
{ 
root: 
[ 
{name:&#39;1&#39;,value:&#39;0&#39;}, 
{name:&#39;6101&#39;,value:&#39;北京市&#39;}, 
{name:&#39;6102&#39;,value:&#39;天津市&#39;}, 
{name:&#39;6103&#39;,value:&#39;上海市&#39;}, 
{name:&#39;6104&#39;,value:&#39;重庆市&#39;}, 
{name:&#39;6105&#39;,value:&#39;渭南市&#39;}, 
{name:&#39;6106&#39;,value:&#39;延安市&#39;}, 
{name:&#39;6107&#39;,value:&#39;汉中市&#39;}, 
{name:&#39;6108&#39;,value:&#39;榆林市&#39;}, 
{name:&#39;6109&#39;,value:&#39;安康市&#39;}, 
{name:&#39;6110&#39;,value:&#39;商洛市&#39;} 
] 
}";

Copy after login

jquery

$.getJSON("https://www.jb51.net/",{param:"sanic"},function(data){ 
//此处返回的data已经是json对象 
//以下其他操作同第一种情况 
$.each(data.root,function(idx,item){ 
if(idx==0){ 
return true;//同countinue，返回false同break 
} 
alert("name:"+item.name+",value:"+item.value); 
}); 
});

Copy after login

2. jQuery parses Json objects:

jQuery provides another Method "parseJSON", which takes a standard JSON string and returns the resulting JavaScript object. Let's take a look at the syntax:

The code is as follows:

data = $.parseJSON(string);

Copy after login

See how it is applied to actual development:

jQuery.ajax({ 
url: dataURL, success: function(results) { 
var parsedJson = jQuery.parseJSON(results); 
alert(parsedJson.name); 
} 
});

Copy after login

Supplementary:

Complete example of jquery parsing json data:

var data=" 
{ 
root: 
[ 
{name:&#39;1&#39;,value:&#39;0&#39;}, 
{name:&#39;6101&#39;,value:&#39;北京市&#39;}, 
{name:&#39;6102&#39;,value:&#39;天津市&#39;}, 
{name:&#39;6103&#39;,value:&#39;上海市&#39;}, 
{name:&#39;6104&#39;,value:&#39;重庆市&#39;}, 
{name:&#39;6105&#39;,value:&#39;渭南市&#39;}, 
{name:&#39;6106&#39;,value:&#39;延安市&#39;}, 
{name:&#39;6107&#39;,value:&#39;汉中市&#39;}, 
{name:&#39;6108&#39;,value:&#39;榆林市&#39;}, 
{name:&#39;6109&#39;,value:&#39;安康市&#39;}, 
{name:&#39;6110&#39;,value:&#39;商洛市&#39;} 
] 
}"; 
//data为字符串类型 则要将字符串类型转换成json数据类型
var jsondatas=eval("("+data+")");
$.each(jsondatas.root,function(i,n){
alert("name"+n.name+"value"+n.value);
}
)
//以下为数组类型字符串 转换成json 字符串 解析
//数组形式的json字符串
 var jsondata="[{name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',value:'咸阳市'}, {name:'6105',value:'渭南市'}, {name:'6106',value:'延安市'}, {name:'6107',value:'汉中市'}, {name:'6108',value:'榆林市'}, {name:'6109',value:'安康市'}, {name:'6110',value:'商洛市'}]";
var json=eval(jsondata);
$.each(json,function(i,n){
alert(json[i].name);
alert(json[i].value);//根据索引取值
});
//json数据字符 不需要转换
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);
})

Copy after login

General processing file (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 = &#39;哈尔滨&#39;"; 
    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> 
 /// 构建JSON字符串 
 /// </summary> 
 /// <param name="dt"></param> 
 /// <returns></returns> 
 public string CreateJsonParameters(DataTable dt) 
 { 
  System.Text.StringBuilder sb = new 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 (j < dt.Columns.Count - 1) 
     { 
      sb.Append("/"" + dt.Columns[j].ColumnName.ToString() + "/":" + "/"" + dt.Rows[i][j].ToString() + "/","); 
     } 
     //如果值为最后个字符则不添加逗号 
     else if (j == dt.Columns.Count - 1) 
     { 
      sb.Append("/"" + dt.Columns[j].ColumnName.ToString() + "/":" + "/"" + dt.Rows[i][j].ToString() + "/""); 
     } 
    } 
    //如果为最后一个值的话 则不添加逗号 
    if (i == dt.Rows.Count - 1) 
    { 
     sb.Append("}"); 
    } 
    else
    { 
     sb.Append("},"); 
    } 
   } 
   sb.Append("]"); 
   return sb.ToString(); 
  } 
  else { return null; } 
 }

Copy after login

$.ajax
  (
  {
   type: "POST",
   url: "Handler.ashx?method=getlist",
   async: false,//true表示异步 false表示同步
   contentType: "application/json",
   dataType: &#39;json&#39;,
   success: function(result) {
   var temp=eval(result);
   //通过javascript来解析返回数组字符串
   for (var i = 0; i < temp.length; i++) 
   { 
    o.innerHTML += "项目名称:" + result[i].ProName + "<br/>网址:<a href=" + result[i].url + " mce_href=" + result[i].url + " target=&#39;_blank&#39;>" + result[i].url + "</a><br/>";
    datas += "项目名称:" + result[i].ProName + "<br/>网址:<a href=" + result[i].url + " mce_href=" + result[i].url + " target=&#39;_blank&#39;>" + result[i].url + "</a><br/>";
   }
    TINY.box.show(datas, 0, 0, 0, 1);
   }
});

Copy after login

Related free learning recommendations: javascript(Video)

The above is the detailed content of How jquery reads json parameters. For more information, please follow other related articles on the PHP Chinese website!