jquery解析json格式数据的方法(对象、字符串)


Posted in Javascript onNovember 24, 2015

本文实例讲述了jquery解析json格式数据的方法。分享给大家供大家参考,具体如下:

json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法。

一、jQuery解析Json数据格式:

使用这种方法,你必须在Ajax请求中设置参数:

dataType: "json"

获取通过回调函数返回的数据并解析得到我们想要的值,看源码:

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

通常情况下,你可以从后台返回JSON数据,前台就交给jQuery啦,哈哈!!

jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例

例1

代码如下:

var data=" 
{ 
root: 
[ 
{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:'商洛市'} 
] 
}";

jquery

$.getJSON("https://3water.com/",{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); 
}); 
});

二、jQuery解析Json对象:

jQuery提供了另一种方法“parseJSON”,这需要一个标准的JSON字符串,并返回生成的JavaScript对象。让我们来看看语法:

data = $.parseJSON(string);

看看它是如何运用的到实际开发中的:
jQuery.ajax({ 
url: dataURL, success: function(results) { 
var parsedJson = jQuery.parseJSON(results); 
alert(parsedJson.name); 
} 
});

补充:

jquery解析json数据完整实例:

var data=" 
{ 
root: 
[ 
{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:'商洛市'} 
] 
}"; 
//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);
})

一般处理文件(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 = '哈尔滨'"; 
    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; } 
 }
$.ajax
  (
  {
   type: "POST",
   url: "Handler.ashx?method=getlist",
   async: false,//true表示异步 false表示同步
   contentType: "application/json",
   dataType: 'json',
   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='_blank'>" + result[i].url + "</a><br/>";
    datas += "项目名称:" + result[i].ProName + "<br/>网址:<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);
   }
});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
谈一谈javascript闭包
Jan 28 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 #Javascript
JavaScript DOM 学习总结(五)
Nov 24 #Javascript
jQuery解析json数据实例分析
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 #Javascript
jQuery解析Json实例详解
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 #Javascript
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
vue实现记事本功能
2019/06/26 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python3安装speech语音模块的方法
2018/12/24 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Django中的静态文件管理过程解析
2019/08/01 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
县优秀教师事迹材料
2014/01/31 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
经典毕业生求职信
2014/07/12 职场文书
2014年司机工作总结
2014/11/21 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript