Javascript 进阶 4-11 JSON

这篇文章要来讨论甚么是JSON

我们来看一下 维基百科 怎么定义JSON~

http://img2.58codes.com/2024/201217701rokFEH52C.png

所以可以了解到,json其实是一个字串的格式。它的结构虽然跟物件相似,但却有些微不同之处

例如属性的部分一定要用双引号,使用单引号或是无引号的状况都会报错。

值的部分如果是字串也一定要是双引号,使用单引号或是无引号的状况都会报错。

http://img2.58codes.com/2024/20121770dIigXraoer.png

http://img2.58codes.com/2024/20121770Ne0TVeVMyg.png

http://img2.58codes.com/2024/201217708qUBxUK67k.png

http://img2.58codes.com/2024/20121770hb01aa6Tsq.png

好,那我们来看看下面的程式码

var family = {        name: '小明家',        members: {            father: '老爸',            mom: '老妈',            ming: '小明'        }    };var json = JSON.stringify(family);console.log(json);

执行结果如下

http://img2.58codes.com/2024/20121770HuGdAM9vZL.png

很显然我们印出来的json结构就是字串。

那么我们有了共识再来看看下面两种 ajax 的写法会回传甚么。

// 原生 AJAXfunction getData() {    console.log(this.response);    // var data = JSON.parse(this.response);    // console.log(data);}var oReq = new XMLHttpRequest();oReq.addEventListener("load", getData);oReq.open("GET", "family.json");oReq.send();

你会发现用原生AJAX传进来的,就是字串的json结构,必须要用JSON.parse转换成物件的结构才能取用资料。

http://img2.58codes.com/2024/201217702XGh9d8qzr.png

但是如果是用jQuery封装好的ajax方法的话,他就会自动帮你转换成物件结构。

// jQuery Ajax$.ajax({    url: "family.json"}).done(function (data) {    console.log(data);});

http://img2.58codes.com/2024/20121770DwiflI7R67.png

另外,也可以透过 开发者工具 > Network > 点选档案 > Response > 原始json的字串资料

来观察原来的资料结构

http://img2.58codes.com/2024/20121770ClIkfzrQan.jpg

结论来说,json是字串的一种,跟物件的结构相似,但他以字串的方式进行讯息的传递。

可以透过 JSON.stringify 以及 JSON.parse 分别传换为 json字串 或是 物件格式 的资料结构。

以上就是关于json的文章内容,希望可以帮助到大家~汪汪


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章