JQuery前端如何操作JSON

古城微笑少年丶 2024-03-25 09:29 86阅读 0赞

![3166da7f55936e21eb43cce86fa9bc18.jpeg][]

**一、关于Json的数据格式**

从结构上看，所有的数据最终都可以分成三种类型：

第一种类型是scalar（标量），也就是一个单独的string（[字符串][Link 1]）或数字（numbers），比如“北京”这个单独的词。

第二种类型是[sequence][]（序列），也就是若干个相关的数据按照一定顺序并列在一起，又叫做array（数组）或List(列表)，比如“北京，东京”。

第三种类型是mapping（映射），也就是一个名/值对（Name/value），即数据有一个名称，还有一个与之相对应的值，这又称作hash（散列）或

dictionary（字典），比如“首都：北京”。

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，它的规则非常简单并且是有趣的：

1）并列的数据之间用逗号（“，”）分隔。

2）映射用冒号（“：”）表示。

3）并列数据的集合（[数组][Link 2]）用方括号("\[\]")表示。

4）映射的集合（对象）用大括号（“\{\}”）表示。

按照这个规则可以作以下理解：

1.数组用“\[\]”创建，对象用“\{\}”创建，并且使用Json基本都是用\[\]或者\{\}创建的数组或对象，否则一个普通的字符串是没有意义的；

2.无论是数组还是对象，之间的元素都用“，”隔开；

3.对象内部，（属性的）名称和值用“：”隔开，并且必须要用“：”隔开，不可单独存在属性名或者值；

4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为JavaScript 对象，然后在网页中使用该数据。

或者反过来，把参数转换成JSON对象，然后在后台反序列化成对象，再获取到参数的值，这可以解决callback方法只能传一个参数的缺点

把JSON对象作为Callback的参数

**二、Json数据形式实例**

var china= \{beijing:\{name:"北京",area:"16000",haidian:\{name:"海淀区"\}\},

shanghai:\{name:"上海",area:"10000",minhang:\{name:"闵行区"\}\}\};

alert(china.beijing.haidian.name);

alert(china.shanghai.minhang.name);

分别弹出“海淀区”和“闵行区”。

var ourcountry=\[\["北京市"\],\["上海市"\],\["合肥市","芜湖市","蚌埠市"\]\];

alert(ourcountry\[2\]\[1\]);

弹出“芜湖市”。

3. var zhongguo = \{provinces: \[\{name: "北京",

cities: \[\{name:"北京市",

quxian: \["海淀区",

"朝阳区",

"东城区",

"西城区"\]

\},

\{name:"安徽省", cities:\[\{ name: "芜湖市", quxian: \["繁昌县","芜湖县","南陵县","三山区"\] \},

\{ name:"合肥市", quxian: \["肥西县","蜀山区","庐阳区"\] \}\]\},

"湖北省"

\};

var str ="中国：\{\\n";

for (var i = 0;i < zhongguo.provinces.length; i++) \{

if (zhongguo.provinces.cities !=null) \{

str += zhongguo.provinces.name+"\{";

for (var j = 0; j < zhongguo.provinces.cities.length; j++) \{

if (zhongguo.provinces.cities\[j\] !=null) \{

str +=zhongguo.provinces.cities\[j\].name +"\{";

for (var k = 0; k <zhongguo.provinces.cities\[j\].quxian.length; k++) \{

str +=zhongguo.provinces.cities\[j\].quxian\[k\];

if (k != zhongguo.provinces.cities\[j\].quxian.length - 1) \{

str +=",";

str +="\}";

str +="\}\\n";

str +="\}";

alert(str);

弹出“ 中国：\{ 北京\{北京市\{海淀区,朝阳区,东城区,西城区\}\}

安徽省\{芜湖市\{繁昌县,芜湖县,南陵县,三山区\}

合肥市\{肥西县,蜀山区,庐阳区\}

**三、在前台把服务器返回的字符串转换成Jsond对象**

客户端可以给服务器端通过地址栏或者post很容易的提交数据，但是服务器端处理完数据之后，将计算的结果信息回传给客户端时就存在了一定的难度，特别是数据量较大时。这个时候数据的格式成了关键，按照某种格式可以很方便的进行数据的组装，然后可以很方便的进行解析。使用Json便是一种很好的策略。在服务器端，按照Json的格式拼装好一个字符串，响应给客户端。客户端如何进行解析呢？一般有两种策略（两种策略的名称是自己给的名字，不一定很合理，但是思路应该是没有问题的）：

1.直接解析

var json = eval("(" + result + ")");

通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json\[\]”的方式便可进行数据访问。

2.间接解析

var json = "r=" + result;

eval(json);

当然上面行代码可以合并为：eval("r=" + result);

通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r\[\]”的方式可进行数据访问。

总结：Json是一种简单的数据交换格式，它几乎可以很好的代替xml让服务器之间灵活的交换数据。

**四、直接请求JSON数据文件**

很多接口都是直接给个URL请求链接，按照URL的参数格式即可返回JSON数据或XML数据，此时可以直接在[Jquery][]发起URL请求直接获取到JSON数据

$.getJSON("/baiying/data.html",function(data) \{

tr2detail\_data = data.train\_info;

tr2list\_data = data.station\_list;

RenderObj.ControlList\["checiInforender"\].Refresh();

RenderObj.ControlList\["checiDetailrender"\].Refresh();

\})

$.getJSON("test.json",function(data)\{

for (var i = 0; i <data.rows.length; i++) \{

$("\#test").append("<p>"+ data.rows\[i\].realName + "</p>");

\});

**五、JavaScript中的数组和对象**

在JavaScript中，通常用\[\]创建的数据格式称为数组，用\{\}创建的东西称为对象。

有一个数组a=\[1,2,3,4\]，还有一个对象a=\{0:1,1:2,2:3,3:4\}，运行alert(a\[1\])，两种情况下的运行结果是相同的！这就是说，数据集合既可以用数组表示，也可以用对象表示，那么到底该用哪一种呢？

其实数组表示有序数据的集合，而对象表示无序数据的集合。如果数据的顺序很重要，就用数组，否则就用对象。

**六、JSON.parse(str)和JSON.stringify(a)：**

1.parse 用于从一个字符串中解析出json 对象。

例如

varstr="\{"name":"cpf","age":"23"\}"

经 JSON.parse(str) 得到：

Object: age:"23"

name:"cpf"

\_proto\_:Object

ps:单引号写在\{\}外，每个属性都必须双引号，否则会抛出异常

2.stringify用于从一个对象解析出字符串，

例如 var a=\{a:1,b:2\}

经 JSON.stringify(a)得到：

"\{"a":1,"b":2\}"

七、字符串转换成JSON的三种方式

1，eval方式解析，恐怕这是最早的解析方式了。

function strToJson(str)\{

var json = eval("(" + str + ")");

return json;

记得str两旁的小括号

2，new Function形式，

function strToJson(str)\{

var json = (new Function("return " + str))();

return json;

3，使用全局的JSON对象。

function strToJson(str)\{

return JSON.parse(str);

使用JSON.parse需严格遵守JSON规范，如属性都需用引号引起来，如下

var str = "\{name:"jack"\}";

var obj = JSON.parse(str); // --> parse error

name没有用引号引起来，使用JSON.parse所有浏览器中均抛异常，解析失败。而前两种方式则没问题。

4、把JSON转化成字符串

一般在调试alert时用，用于查看JSON对象明细

JSON.stringify(res)

来源：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[3166da7f55936e21eb43cce86fa9bc18.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/60311f59438d4f838bba3c4e1ba37e45.png
[Link 1]: https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E4%B8%B2&spm=1001.2101.3001.7020
[sequence]: https://so.csdn.net/so/search?q=sequence&spm=1001.2101.3001.7020
[Link 2]: https://so.csdn.net/so/search?q=%E6%95%B0%E7%BB%84&spm=1001.2101.3001.7020
[Jquery]: https://so.csdn.net/so/search?q=Jquery&spm=1001.2101.3001.7020
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com