Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)


Posted in Javascript onOctober 25, 2016

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。

一、JSON字符串转换为JSON对象: eval() 和 JSON.parse

eg- json字符串:

var data = '{ "name": "dran", "sex": "man" }';
var obj = eval("("+data+")"); 或者
var obj = JSON.parse(data);

然后,就可以这样读取: alert(obj.name + obj.sex);

提示:为什么要 eval这里要添加 ("("+data+")");呢?

原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句

二、JSON对象转换为JSON字符串 : obj.toJSONString()或者全局方法JSON.stringify(obj) (obj代表json对象)

eg-json对象: var obj = { "name": "dran", "sex": "man" };
var jstring = JSON.stringify(obj) ;// 建议用这个
var jstring = obj.toJSONString(); //toJSONString()不是js原生的方法,需要引入相应的库或自己定义后才能用 (不习惯用)

然后,就可以这样读取: alert(jstring);

注意:

目前,Firefox、Opera、IE8以上版本也提供了本地JSON支持。其中,JSON解释器提供的函数有:JSON.parse、JSON.stringify。

对于那些并不提供本地JSON支持的浏览器可以引入脚本json2.js,来实现JSON转换功能。json2.js脚本可到https://github.com/douglascrockford/JSON-js/blob/master/json2.js页面下载

在AJAX实现前后台数据交互的时候,通常使用JSON的数据格式,对于JSON来说,有严格的代码规范,一旦格式出问题,就无法显示出相应效果,同时还不在控制台报错

补充: ajax读取json数据拼接显示:

json文件:

{
"first":[
{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
{"name":"李梅","sex":"女"},
],
"second":[
{"name":"上海大学","area":"上海"},
{"name":"武汉大学","area":"武汉"},
{"name":"北京大学","area":"北京"},
{"name":"山东大学","area":"山东"},
]
}

html和ajax代码

1、用for循环

$.ajax({
url : "ceshi.json",
type : "POST", 
dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text, 因为测试, json文件格式正确书写
success: function(data) { 
var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象
var arr1 = dataJson.first;
var arr2 = dataJson.second;
//一栏显示 用for循环完成数组解析
for(var i = 0; i<arr1.length; i++){ 
for(var j = 0; j<arr2.length; j++){
var str='<div style="display:block">'+
'<div>姓名:'+arr1[i].name+' 性别:'+arr1[i].sex+'</div>'+
'<div>学校:'+arr2[j].name+'</div>'+
'<div>地点:'+arr2[j].area+'</div>'+
//'<div>喜好:'+arr1[i].like+'</div>'+ //全显示
//'<div>喜好:'+arr1[i].like[1]+'</div>'+ //单独设置
//'<div>喜好:'+arr1[i].like[0]+'</div>'+
'</div>';
}
$(".result").append(str);
}
//分层显示
//var str = "";
// var str1 = "";
// if (arr1 != null) {
// for (var i = 0; i < arr1.length; i++) { //这里面都是创建并赋值
// str += "<span>" + arr1[i].name + "</span><span>" + arr1[i].sex + "</span><br>";
// }
// $(".result").html(str);
// }
// if (arr2 != null) {
// for (var j = 0; j < arr2.length; j++) {
// str1 += "<span>" + arr2[j].name + "</span><span>" + arr2[j].area+ "</span><br>";
// }
// $(".result2").html(str1);
// }
},
error:function(data){
alert("error"); 
}
})
<div class="result">frist:</div>
<div class="result2">second:</div>
for

2、 each循环 使用$.each方法遍历返回的数据date,插入到class为 .result中

JSON:

[
{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
{"name":"李梅","sex":"女"},
]
$.ajax({
url : "ceshi.json",
type : "POST", 
dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text, 因为测试, json文件格式正确书写
success: function(data) { 
var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象
//each循环 使用$.each方法遍历返回的数据date,插入到class为 .result中 i 表示索引 item 信息值 对象 
$.each(dataJson,function(i,item){
var str='<div style="display:block">'+
'<div>姓名:'+item.name+' 性别:'+item.sex+'</div>'+
'<div>like:'+item.like+'</div>'+
'</div>'; 
$(".result").append(str); 
})
},
error:function(data){
alert("error"); 
}
})
<div class="result"></div>
each

PS:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变

JSON 数据使用方法:

//json对象:
var jsonObj= {
"name":" 张三",
"sex":"男",
"age":26,
};
使用: jsonObj.name= "张三"
jsonObj.age= "26"
//json数组: []下标 从 0 开始
var jsonArr =[
{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
]
使用: jsonArr[0].sex="男"
jsonArr[1].name="李四"
//多个数组: []下标 从 0 开始
var options = {
"city" :[
{ 
"name":"上海",
"area":"普陀区",
"option":"真北路",
"correct":"1"
},
{
"name":"石家庄",
"area":"河北",
"option":"在北方",
"correct":"2"
}],
"world":[
{
"title":"美国",
"content":"好莱坞大片 科幻"
},
{
"title":"中国",
"content":"爱我中华,虽远必诛"
}
]
};
options.city[0].area="普陀区"
options.world[1].content="爱我中华,虽远必诛

以上所述是小编给大家介绍的Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
js 颜色选择插件
Jan 23 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
利用yarn实现一个webpack+react种子
Oct 25 #Javascript
Yarn的安装与使用详细介绍
Oct 25 #Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 #Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 #Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 #Javascript
微信小程序 video组件详解
Oct 25 #Javascript
微信小程序 form组件详解
Oct 25 #Javascript
You might like
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php去除重复字的实现代码
2011/09/16 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Python文件操作函数用法实例详解
2019/12/24 Python
Python常用数据分析模块原理解析
2020/07/20 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
活动邀请函范文
2014/01/19 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
会计专业导师推荐信
2014/03/08 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server