Ajax系列之JSON数据格式

2024年4月1日 133次阅读 来源: a达达

JSON数据格式

JSON是什么

  • JSON是一种轻量级的数据交换格式
  • JSON文件时独立的,扩展名是”.json”该文件中允许保存JSON格式的数据
  • 注意: 在JSON文件中字符串必须是双引号( ” ” )

示例代码:

{
  "动画片" : [
    {
      "数码宝贝" : [
        "亚古兽", "加鲁鲁兽"
      ],
      "大头儿子小头爸爸" : [
        "围裙妈妈", "隔壁王叔叔"
      ]
    }
  ],
  "漫威" : [
    {
      "复仇者联盟" : [
        "绿巨人", "奇异博士"
      ],
      "正义联盟" : [
        "超人", "海王"
      ]
    }
  ]
}

JavaScript中的JSON

  • JSON是基于JavaScript语法,但与之不同的是JavaScript不是JSON,JSON也不是JavaScript

  • JavaScript类型:

    • 对象和数组
    • 数值
    • 字符串

  • JSON的不同点:

    • 属性名称必须是双引号括起来的字符串,最后一个属性后不能有逗号
    • 禁止出现前导零 – 比如”01,02,03等等”
    • 只有有限的一些字符可能被转义

示例代码:

<body>
<script>
    // JSON字符串 - 数据格式符合JSON格式的要求，类型是字符串类型
    var jsonString = '{"name" : "皮卡丘"}';
    // JSON对象 - JSON数据格式在JavaScript中的具体表现(对象和数组)
    var jsonObject = {
        name : '皮卡丘'
    };
    var jsonArr = [1,2,3,4];


</script>
</body>

JSON字符串与JSON对象

示例代码:

    <script src="js/json2.js"></script>
</head>
<body>
<script>
    // JSON字符串
    var jsonString = '{"name" : "皮卡丘"}';

    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);

    var jsonResult = JSON.stringify(jsonObject);
    console.log(jsonResult);

</script>
</body>

Ajax中的JSON

示例代码:

<body>
<button id="btn">请求</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 1.接收数据 - JSON数据格式，是字符串类型
                var data = xhr.responseText;
                // 2.将符合JSON格式的字符串类型数据进行转换
                var json = JSON.parse(data);
                // 3.进行具体处理
                console.log(json);
            }
        }

        // 请求数据格式 - user=zhangwuji&pwd=12345
        xhr.open('post','server.json');

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        var obj = {
            name : '哪吒',
            age : 26
        }
        /*var jsonString = JSON.stringify(obj);
        console.log(jsonString);// {"name":"哪吒","age":26}*/

        // 将JSON字符串转换成符合请求数据的格式
        xhr.send('name=' + obj.name + '&age=' + obj.age);
    });


</script>
</body>

Ajax中的XML

示例代码:

<body>
<button id="btn">请求</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 1.接收数据 - responseXML属性 -> 接收XML数据格式
                var data = xhr.responseXML;
                // 2.利用DOM解析XML即可
                var nameElement = data.getElementsByTagName('name')[0];
                console.log(nameElement.textContent);
            }
        }
        xhr.open('post','server.xml');
        xhr.send(null);
    });


</script>
</body>
    原文作者：a达达
    原文地址: https://segmentfault.com/a/1190000016377225
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞