JSON

最新推荐文章于 2022-11-13 20:15:03 发布

gaearon

最新推荐文章于 2022-11-13 20:15:03 发布

阅读量188

点赞数

分类专栏： Ajax 文章标签： ajax json js javascript

本文链接：https://blog.csdn.net/weixin_45499478/article/details/109713388

版权

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JSON是什么

JSON 全称为 JavaScript Object Notation，JSON 在一开始基于 JavaScript，
后期成为独立于任何语言的文本格式。

JSON 官方网站

新建一个 JSON 文件

JSON 的格式较为简单，第一种格式为键值对，第二种格式为有序列表。

需要注意的是，JSON 文件中只能使用两个点的双引号 ""

简单的 JSON 格式如下：

{
  "name": "小明",
  "age": "13"
}

JSON 格式在实际开发中并不像这样简单，比较复杂的 JSON 格式如下：

{
  "武侠": [
    {
      "倚天屠龙记":[
        "张无忌",
        "周芷若"
      ],
      "阿萨德": [
        "大会",
        "ashdo"
      ]
    }
  ],
  "言情": [
    {
      "安山东": [
        "asf","uo"
      ],
      "好事发后": [
        "as","ewgs"
      ]
    }
  ]
}

JSON 字符串与 JSON 对象

JSON 对象就是我们上面定义的格式，非常类似 JavaScript 中的对象；
而 JSON 字符串就是 JSON 格式的字符串，JSON 格式的字符串解析起来比较麻烦。
在实际开发中两种情况都会出现。

在 JavaScript 中 JSON 字符串的格式如下：

var json_text = '{"name":"小明", "age":"16"}'

需要注意的是，JavaScript 中的 JSON 外部引号只能是单引号，因为字符串内部必须符合 JSON 格式。

JSON 对象与 JSON 字符串之间的转换

JavaScript 中有一个 JSON 对象，JSON 对象提供了两个方法用于它们两个之间的转换：

JSON.parse()：将 JSON 字符串转为 JSON 对象
JSON.stringify()：将 JSON 对象转为 JSON 字符串

如下代码所示：

<body>
<script>
    var json_str = '{"name":"小明", "age":"16"}'
    // JSON 字符串转为 JSON 对象
    var json_obj = JSON.parse(json_str)
    console.log(json_obj)
    var json_result = JSON.stringify(json_obj)
    console.log(json_result)
</script>
</body>

结果：

在这里插入图片描述

需要注意的是，JSON 提供的这两个方法都具有浏览器兼容问题，为此提供了一些解决方案。
json.js 就是比较好的解决方案，
引入 json.js 可以直接在低版本浏览器中使用这两个方法。

Ajax 中的 JSON

在 Ajax 中接受 JSON 数据只需要使用 XHR 对象的 responseText 属性获取服务端的相应数据即可。
如下代码所示：

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn')
    btn.addEventListener('click', function (){
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function (){
            // 当响应成功并且状态码为200才进行下一步操作
            if (xhr.readyState === 4 && xhr.status === 200){
                // 获取服务端响应数据
                var data = xhr.responseText
                // 将字符串形式的 json 转为对象模式
                var json = JSON.parse(data)
                console.log(json)
            }
        }
        xhr.open('get','sever.json')
        xhr.send(null)
    })
</script>
</body>

若需要将 JSON 传送到服务端需要使用 send() 方法发送数据，send() 方法中传入的值有要求，
需要使用字符串拼接成 key=value&key2=value2... 的格式。
如下代码所示：

<body>
<button id="btn">发送</button>
<script src="../Ajax/myTools.js"></script>
<script>
    var btn = document.getElementById('btn')
    btn.addEventListener('click',function (){
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function (){
            if (xhr.status === 200 && xhr.readyState === 4){
                console.log(xhr.responseText)
            }
        }
        var obj = {
            "name":"小明",
            "age": "18"
        }
        xhr.open('post','sever.json');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send('name='+obj.name+'&age='+obj.age);
    })
</script>
</body>

当我们点击发送按钮时，得到的结果如下所示：

在这里插入图片描述

gaearon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON

JSON是什么JSON 全称为 JavaScript Object Notation，JSON 在一开始基于 JavaScript，后期成为独立于任何语言的文本格式。JSON 官方网站新建一个 JSON 文件JSON 的格式较为简单，第一种格式为键值对，第二种格式为有序列表。需要注意的是，JSON 文件中只能使用两个点的双引号 ""简单的 JSON 格式如下：{ "name": "小明", "age": "13"}JSON 格式在实际开发中并不像这样简单，比较复杂的 JSON
复制链接

扫一扫