json对于前端

在前端与后端进行数据交互的时候,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>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页