json对于前端

最新推荐文章于 2024-08-28 19:44:51 发布

chensadasda

最新推荐文章于 2024-08-28 19:44:51 发布

阅读量1.1k

点赞数 3

分类专栏：随笔

本文链接：https://blog.csdn.net/colorfulqq/article/details/81592169

版权

随笔专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在前端与后端进行数据交互的时候，json对于前端和后端的同学来说都是很熟悉的东西，同时json相比较于XML也更具有优势。今天我将从三个方面来讲json。

一.简单介绍json相关内容！

1.什么是json

json是javascript对象表示法(javascript object notation)的简写
首先json单独拿出来讲，json并不是一种语言，而是一种轻量级的文本数据交互格式。
JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。
JSON 具有自我描述性，更易理解。
以上就简单的说明了什么json，json又是怎么转化为js对象的呢，这就要归功于eval()函数，正因为json文本格式与js创建对象的代码是相同的，所以不需要解析器就可以通过eval()来让json数据生成js对象！

2.json与XML的不同

他们的相似点和不同点就不用文字来描述了，下面我将通过两个简单的代码片段来看一下他们的区别！
XML格式：

<person>  
    <name>xiazdong</name>  
    <age>20</age>  
</person>

json格式：

{  
    "name": "xiazdong",  
    "age": 20  
}

由此可见两者区别，XML更类似于HTML，而json更类似于js。
json格式代码相对于XML更简介方便，更能让我们看懂！
代码量不是很大，看的感触还是不太深，那么我再举一个代码量较大的来看看
XML：

<section>  
    <title>BOOK</title>  
    <signing>  
        <author name="author-1"/>  
        <book title="book1" price="$11"/>  
    </signing>  
    <signing>  
        <author name="author-2"/>  
        <book title="book2" price="$22"/>  
    </signing>  
</section>

json:

"section": {  
    "title": "BOOK",  
    "signing": [  
        {  
            "author": {  
                "name": "author-1"  
            },  
            "book": {  
                "title": "book1",  
                "price": "$11"  
            }  
        }, {  
            "author": {  
                "name": "author-2"  
            },  
            "book": {  
                "title": "book2",  
                "price": "$22"  
            }  
        }     
    ]
}

3.json与XML的使用

从代码量较大的例子来看，json更具优势。
同时json的使用相对于XML来说也更具优势，从具体使用方式来看
XML:读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中
需要3步
json:读取 JSON 字符串
用 eval() 处理 JSON 字符串
只需要两步

二.json语法

1.json数据结构

json有两种数据结构有两种，一种是对象，另外一种是数组，两者可以一起嵌套使用，其中对象用{}表示，数组用[]表示
下面是我从json官网找的图片描述两种数据结构
对象: Map
数组: Map
还有就是里面value的值的类型只能是下面几种，也就是json值和怎么表示如下：
字符串（在双引号中），数字（整数或浮点数），对象（在花括号中），数组（在方括号中），逻辑值（true 或 false），null
Map

2.json语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组
其中比较重要的两种类型的规则

json 对象

json 对象在花括号中书写；
对象可以包含多个名称/值对；

{
    "firstName": "John",
    "lastName ": "Doe"
}

等价于如下js语句

firstName = "John"
lastName = "Doe"

json 数组

json 数组在方括号中书写；
数组可包含多个对象；

{
    "employees": [
        { 
            "firstName": "John",
             "lastName": "Doe" 
        }, { 
            "firstName": "Anna", 
            "lastName": "Smith" 
        }, { 
            "firstName": "Peter",
            "lastName": "Jones" 
        }
    ]
}

在上面的例子中，对象 “employees” 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。

JSON 简单例子

下面我将以json对象为例子来介绍一下json可以怎么玩
1.访问对象值：

// 使用.来访问对象值
var myObj, x; 
var myObj = {
    "name": "love", 
    "who": "zouqin"
}; 
x = myObj.name;     // love

// 使用[]来访问对象值
var myObj, x; 
var myObj = {
    "name": "love", 
    "who": "zouqin"
};
x = myObj.["name"];   // love

2.循环对象

// 使用for-in来循环对象
var myObj = {
    "name": "love", 
    "who": "zouqin"
}; 
for (var x in myObj) { 
    console.log(x + ' ' + myObj[x]); 
}
// name love
// who zouqin

3.删除对象属性

var myObj = {
    "name": "love", 
    "who": "shagu"
};
delete myObj["name"];
console.log(myObj);  // {who: "shagua"}

json文件

json文件的文件类型是 “.json”
json 文本的 MIME 类型是 “application/json”

三.json使用

1.json .parse() 反序列化

在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法: JSON.parse(text[, reviver])

参数说明：

text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

<body>
<h2>从 JSON 对象中创建 JavaScript 对象</h2>
<p id="demo"></p>

<script>
    var obj = JSON.parse('{ "name":"love", "who": "zouqin"}');
    document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
</body>

2.json .stringify() 序列化

在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法：JSON.stringify(value[, replacer[, space]])

参数说明：

value:
必需，一个有效的 json 字符串。
replacer:可选。用于转换结果的函数或数组。
- 如果 replacer 为函数，则 json.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串。
- 如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
- space:可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字。

<body>
<h2>将 JavaScript 对象转换为 json 字符串</h2>
<p id="demo"></p>

<script>
    var obj = { "name":"love", "who": "zouqin"};
    var myJson = JSON.stringify(obj);
    document.getElementById("demo").innerHTML = myJson;
</script>
</body>

3.json 文本转换 eval

从 web 服务器上读取 json 数据（作为文件或作为 HttpRequest），将 json 数据转换为JavaScript 对象，然后在网页中使用该数据。由于 json语法是 JavaScript 语法的子集，JavaScript 函eval() 可用于将 json文本转换为 JavaScript 对象。
注：必须把文本包围在括号中，这样才能避免语法错误：

<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
    网站名: <span id="name"></span><br> 
    网站地址: <span id="url"></span><br> 
</p> 
<script>
    var txt = '{ "sites" : [' 
        +'{ "name":"google" , "url":"www.google.com" },' 
        +'{ "name":"微博" , "url":"www.weibo.com" }' 
    +']}';

    var obj = eval ("(" + txt + ")");

    document.getElementById("name").innerHTML=obj.sites[0].name 
    document.getElementById("url").innerHTML=obj.sites[0].url 
</script>
</body>