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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
Element实现动态表格的示例代码
Aug 02 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
Python中的exec、eval使用实例
2014/09/23 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python之列表实现栈的工作功能
2019/01/28 Python
深入了解Django中间件及其方法
2019/07/26 Python
Django接收自定义http header过程详解
2019/08/23 Python
通过实例解析Python调用json模块
2019/12/11 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
2014年大学生自我评价
2014/01/19 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
Oracle用户管理及赋权
2022/04/24 Oracle