0

0

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

高洛峰

高洛峰

发布时间:2017-01-09 14:51:58

|

1870人浏览过

|

来源于php中文网

原创

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文件:

倍塔塞司
倍塔塞司

AI职业规划、AI职业测评、定制测评、AI工具等多样化职业类AI服务。

下载
{
"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[i].name+' 性别:'+arr1[i].sex+'
'+ '
学校:'+arr2[j].name+'
'+ '
地点:'+arr2[j].area+'
'+ //'
喜好:'+arr1[i].like+'
'+ //全显示 //'
喜好:'+arr1[i].like[1]+'
'+ //单独设置 //'
喜好:'+arr1[i].like[0]+'
'+ '
'; } $(".result").append(str); } //分层显示 //var str = ""; // var str1 = ""; // if (arr1 != null) { // for (var i = 0; i < arr1.length; i++) { //这里面都是创建并赋值 // str += "" + arr1[i].name + "" + arr1[i].sex + "
"; // } // $(".result").html(str); // } // if (arr2 != null) { // for (var j = 0; j < arr2.length; j++) { // str1 += "" + arr2[j].name + "" + arr2[j].area+ "
"; // } // $(".result2").html(str1); // } }, error:function(data){ alert("error"); } })
frist:
second:
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='
'+ '
姓名:'+item.name+' 性别:'+item.sex+'
'+ '
like:'+item.like+'
'+ '
'; $(".result").append(str); }) }, error:function(data){ alert("error"); } })
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使用方式详细介绍(小结),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持!

更多Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)相关文章请关注PHP中文网!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Swoft2.x速学之http api篇课程
Swoft2.x速学之http api篇课程

共16课时 | 0.9万人学习

PHP基础入门课程
PHP基础入门课程

共33课时 | 2万人学习

第三期培训_PHP开发
第三期培训_PHP开发

共116课时 | 26.2万人学习

最新文章

更多
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号