后端接口返回给前端的数据格式JSON——0526笔记整理

最新推荐文章于 2026-04-15 15:09:39 发布

原创最新推荐文章于 2026-04-15 15:09:39 发布 · 1w 阅读

35 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

web前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍了JSON的基本概念，包括其作为轻量级数据交换格式的特点，与XML的对比，以及其在不同编程语言中的广泛应用。接着，详细阐述了JSON的语法规则，包括对象型和数组型的数据结构，并提供了JSON值的类型。此外，讨论了JSON字符串与JSON对象的相互转换方法，并列举了转换示例。最后，讲解了如何在HTML中使用JSON数据，包括直接使用变量和拼接字符串两种方式。

一、什么是JSON？

1、JSON（JavaScript Object Notation）：JavaScript 对象表示法
2、JSON 是是轻量级的文本数据交换格式。类似 XML，但比 XML 更小、更快，更易解析。
3、JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
4、JSON 具有自我描述性，更易理解
（以上段落摘自菜鸟）

二、JSON的语法规则

JSON的类型：
对象型、数组型（数组中可以包含多个对象）

JSON的语法规则：

数据在名称/值对中 "key":"value"
数据由逗号分隔
{} 保存对象
[] 保存数组

JSON值的类型：

数字
字符串
Boolean（true 或 false）
数组
对象
null

JSON文件：

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

备注：以上摘自菜鸟

举例：
建立单个JSON

    var res = {
        "name": "张三",
        "sex": "男",
        "age": 18,
        "hobby": [
            {
                "name": "篮球"
            },
            {
                "name": "足球"
            },
            {
                "name": "羽毛球"
            }
        ]
    };

集合类型的JSON

    var list = [
        {
            "id": "10001",
            "name": "陕西省",
            "child": [
                {
                    "id": "100011",
                    "name": "宝鸡市"
                },
                {
                    "id": "100012",
                    "name": "宝鸡市"
                }
            ]
        },
        {
            "id": "10002",
            "name": "甘肃省",
            "child": [
                {
                    "id": "100021",
                    "name": "酒泉"
                },
                {
                    "id":"100022",
                    "name":"兰州"
                }
            ]
        }
    ];

三、JSON字符串和JSON对象相互转换

JSON 通常用于与服务端交换数据，接收到的服务器数据一般是字符串，但JavaScript 中一般使用的是JSON对象，所以就需要相互转换。转换方法如下：

JSON.stringify(); JSON对象转化为JSON字符串
JSON.parse(); 字符串JSON转化为JSON对象

举例：

var str=JSON.stringify(list); 
console.log(str);   //字符串
console.log(JSON.parse(str));    //对象

四、JSON数据的使用

JSON数据导入HTML元素的方法：
1、直接使用变量

<span>姓名：</span><span id="name"></span>
<span>性别：</span><span id="sex"></span>
<script>
var person={
        "name":"张三",
        "sex":"男"
    }
    document.querySelector("#name").innerHTML=person.name;
    document.querySelector("#sex").innerHTML=person.sex;
</script>

2、拼接字符串的方式

<ul id="menu"></ul>
<script>
var data=[
        {
            "name":"李四"
        },
        {
            "name":"张三"
        },
        {
            "name":"王五"
        }
    ];
    
    var str="";
    for(var i=0;i<data.length;i++)
    {
        str+="<li>"+data[i].name+"</li>";
    }
    document.querySelector("#menu").innerHTML=str;
</script>