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 相关文章推荐
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
javascript去除空格方法小结
May 21 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
python实现字符串和数字拼接
2020/03/02 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
iostream与iostream.h的区别
2015/01/16 面试题
室内设计专业个人的自我评价
2013/12/18 职场文书
眼镜促销方案
2014/03/15 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技