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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
vue远程加载sfc组件思路详解
Dec 25 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
php下获取客户端ip地址的函数
2010/03/15 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
EJB的角色和三个对象
2015/12/31 面试题
四风存在的原因分析
2014/02/11 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
学校端午节活动总结
2015/02/11 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书