【Ajax异步交互与跨域访问】Json数据格式

韶音鄀逝

于 2020-09-06 15:17:48 发布

阅读量183

点赞数

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

本文链接：https://blog.csdn.net/XHoler/article/details/108431917

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. JSON是什么

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON是独立于任何语言的文本格式，易于程序员阅读和编写，同时易于计算机解析和生成

JSON分为两种结构
1. “键/值”对的集合。不同语言中，它被理解为对象、记录、结构、字典、哈希表、关联数组等
  - JSON中键值对的集合是无序的’名称/值’的集合。如{name:admin,passworld:6666}
2. 值的有序列表.在大部分语言中，被理解为数组(array)。
  - JSON格式中作为值的类型可以是字符串、数值、true、false、null、对象、数组。如[red,blue]

JSON文件

JSON独立的文件，拓展名为‘.json’。文件中允许保存JSON格式的数据。

{
    "name":"admin",
    "passworld":666666,
    "classes":[
        "www2",
        "www1"
    ]
}

二. JavaScript中的JSON

JSON是一种语法，用来序列化对象、数组、数值、字符串、布尔值和null。它基于JavaScript语法，但它不是JavaScript。

JavaScript类型	JSON的不同点
对象和数组	属性名称必须是双引号括起来的字符串；最后一个属性后不能有逗号
数值	禁止出现前导零
字符串	只有有限的一些字符可能被转义

JSON字符串就是指在JavaScript语言中内容格式符合JSON格式的字符串类型的数据
```
var jsonText = '{"name":"admin","text":"students"}';
```
JSON对象就是指JSON格式在JavaScript语言中的具体表现形式为对象或数组
```
var jsonObject = {
    "name":"admin",
    "text":"sssr"
}
```
JSON对象与JSON字符串转换
javaScript中有JSON对象，该对象用于实现字符串与对象之间的转换。具体以下两个方法：
- JSON.parse()方法：解析JSON字符串并返回对应的值。
- JSON.stringify()方法：返回与指定值对应的JSON字符串.
注：JSON对象在旧版游览器中不被支持

三. Ajax中的JSON

通过Ajax向服务器端提交异步请求时，可以使用JSON格式的请求数据。

<script>
        // 获取按钮
        var btn = document.getElementById('btn');

        // 给按钮添加点击事件
        btn.addEventListener('click',function(){
            // 创建XMLHttpRequest核心对象
            var xhr = createXMLHttpRequest();

            // 监听服务器
            xhr.onreadystatechange = function(){
                // 判断通信状态和响应状态码
                if(xhr.readyState === 4 && xhr.status === 200){
                    var data = xhr.responseText  // 接收JSOn数据格式
                    var json = JSON.parse(data)  // 转为字符串格式
                    console.log(json);
                }
            }

            // 与服务器建立连接
            xhr.open('post', './server.json');
            xhr.setRequestHeader('Content-Type', 'application/X-www-form-urlencoded');

            var obj = {
                name: "admin",
                age: 18
            }
            // var jsonString = JSON.stringify(obj);
            
            // 向服务器发送数据，get方法需为NULL
            xhr.send('name='+obj.name + '&age=' + obj.age);
        })
</script>

四. 三级联动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
</head>
<body>
    <!-- 省 -->
    <select id="province"></select>
    <!-- 市 -->
    <select id="city">
        <option value="">---------</option>
    </select>
    <!-- 区 -->
    <select id="counties">
        <option value="">---------</option>
    </select>
    <script>
        // 获取省份下拉列表
        var provinceElement = document.getElementById('province');
        var citiesElement = document.getElementById('city');
        var countiesElement = document.getElementById('counties');

        // 动态获取省份信息
        var xhr = createXMLHttpRequest();

        var datas
        var cities
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                var response = xhr.responseText;
                // console.log(response);
                // 将JSON字符串转换成JSON对象
                datas = JSON.parse(response);
                // 遍历数组类型的对象
                for(var i=0;i<datas.length;i++){
                    var data = datas[i];
                    var province = data.province;
                    // 创建一个option
                    var opt = document.createElement('option');
                    opt.setAttribute('value',province);
                    opt.textContent = province;
                    // 将option添加进去
                    provinceElement.appendChild(opt);
                }
            }
        }

        xhr.open('get','./data/server1.json');
        xhr.send(null);

        // 为省份下拉列表绑定事件
        provinceElement.addEventListener('change',function(){
            // 将城市下拉列表清空
            var cityOpts = citiesElement.options;
            for(var x=1;x<cityOpts.length;x++){
                citiesElement.removeChild(cityOpts[x]);
                x--;
            }

            // 获取用户选择的省份信息
            var opts = provinceElement.options; // 获取指定下拉列表所有选项
            var index = provinceElement.selectedIndex;// 获取被选中的索引值
            var opt = opts.item(index);
            var provinceName = opt.getAttribute('value'); // 获取选择的城市的值
            // 根据省份获取对应城市信息
            for (var i = 0; i < datas.length; i++) {
                var data = datas[i];
                var province = data.province;
                if(provinceName === province){
                    // 获取对应城市
                    cities = data.cities;
                    // 遍历城市数组
                    for(var j = 0; j<cities.length;j++){
                        var city = cities[j].city;

                        var opt = document.createElement('option');
                        opt.setAttribute('value', city);
                        opt.textContent = city;
                        // 将option添加进去
                        citiesElement.appendChild(opt);
                    }
                }
            }
        })

        // 为城市下拉列表添加点击事件
        citiesElement.addEventListener('change',function(){
            // 将城市下拉列表清空
            var countOpts = countiesElement.options;
            for (var x = 1; x < countOpts.length; x++) {
                countiesElement.removeChild(countOpts[x]);
                x--;
            }

            // 获取用户选择的城市信息
            var opts = citiesElement.options;
            var index = citiesElement.selectedIndex;
            var opt = opts.item(index);
            var cityName = opt.getAttribute('value');

            // 根据城市获得区信息
            for(var i = 0;i<cities.length;i++){
                var data = cities[i];
                var city = data.city;
                // console.log(city);
                if(cityName === city){
                    counts = data.counties;
                    // 遍历地区数组
                    for (var j = 0; j < counts.length; j++) {
                        var count = counts[j];

                        var opt = document.createElement('option');
                        opt.setAttribute('value', count);
                        opt.textContent = count;
                        // 将option添加进去
                        countiesElement.appendChild(opt);
                    }
                }
            }
        })

        // 创建XMLHTTPRequest对象
        function createXMLHttpRequest() {
            var httpRequest;
            if (window.XMLHttpRequest) { // 适用于Chrome、Firefox、Safari
                httpRequest = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                try {
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); // ie 7以后的版本
                } catch (e) {
                    try {
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); // ie 6以前的版本
                    } catch (e) { }
                }
            }
            return httpRequest;
        }
    </script>
</body>
</html>