Ajax数据格式之JSON

最新推荐文章于 2019-06-20 14:54:03 发布

linqunbin

最新推荐文章于 2019-06-20 14:54:03 发布

阅读量104

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/91408500

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

HTML的代码如下:
注:Chrome默认不支持加载本地JSON,Firefox虽然会加载,但是打开游览器额console,会看到报错.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function () {
            var ul = document.getElementById('ul');
            var allA = ul.getElementsByTagName('a');
            for (let i = 0; i < allA.length; i++) {
                allA[i].onclick = function () {
                    // 获取A元素的Text内容
                    var atext = this.innerText

                    var xmlRequest = new XMLHttpRequest();
                    var url = this.href;
                    var method = "GET";

                    xmlRequest.open(method, url);
                    xmlRequest.send(null);

                    xmlRequest.onreadystatechange = function () {
                        if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
                            var display_area = document.getElementById('display_area');
                            // 将JSON的字符串,转换为JS对象
                            var result = JSON.parse(xmlRequest.responseText);
                            display_area.innerHTML = "性别:" + result[atext].name;
                            display_area.innerHTML += "<br>" + "年龄:" + result[atext].age;
                            display_area.innerHTML += "<br>" + "性别:" + result[atext].sex;
                            display_area.innerHTML += "<br>" + "邮箱:" + result[atext].email;
                        };
                    };
                    return false;
                };
            };
        }
    </script>
</head>

<body>
    <ul id="ul">
        <li><a href="bruce.json">bruce</a></li>
        <li><a href="bruce.json">huimin</a></li>
    </ul>
    <span>显示区域</span>
    <br>
    <span id="display_area"></span>
</body>

</html>

JSON(文件后缀写成json即可)文件代码如下:

{"bruce": {
        "name": "Bruce Lin",
        "age": "18",
        "sex": "man",
        "email": "linqb@126.com"},
"huimin": {
        "name": "HuiMin Liu",
        "age": "18",
        "sex": "Women",
        "email": "liuhm@126.com"}
}

linqunbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax数据格式之JSON

HTML的代码如下:注:Chrome默认不支持加载本地JSON,Firefox虽然会加载,但是打开游览器额console,会看到报错.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...
复制链接

扫一扫