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 相关文章推荐
json对象转字符串如何实现
Dec 02 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
vue使用原生swiper代码实例
Feb 05 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
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
django之常用命令详解
2016/06/30 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python双向循环链表实现方法分析
2018/07/30 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python request post上传文件常见要点
2020/11/20 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
档案室主任岗位职责
2014/02/12 职场文书
卫生标语大全
2014/06/21 职场文书
民族学专业求职信
2014/07/28 职场文书
学校食堂标语
2014/10/06 职场文书
西安导游词
2015/02/12 职场文书
水电工岗位职责
2015/02/14 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js