AJAX请求JSON数据

JSON相关介绍:

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快,更易解析。

JSON 是轻量级的文本数据交换格式。

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。

下面是user.json文件

{
  "id":1,
  "name":"Backy",
  "email":"[email protected]"
}

下面是HTML文件:

1.创建XMLHttpRequest对象

2.请求数据

(1)判断是否请求成功,如果请求成功,则将JSON数据转化为Javascript对象

(2)用es6的模板字符串将请求到的Javascript对象以ul的形式存储

(3)将ul插入到dom节点

3.向服务器发送请求

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function loadXMLDoc() {
            // 创建XMLHttpRequest对象
            let xmlhttp = new XMLHttpRequest();

              xmlhttp.onload = function(){
                 if(this.status === 200)
          //使用parse方法将JSON数据转化为JS对象
                   var m = JSON.parse(this.responseText);
                      let output = '';
                    //es6中的模板字符串语法
                     output += (`
                    <ul>
                      <li> ${m.id} </li>
                      <li> ${m.name} </li>
                      <li> ${m.email} </li>
                    </ul>`);

                 document.getElementById("user").innerHTML = output;
              };
            xmlhttp.open("GET","user.json",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
<input type="button" value="请求单个数据"  onclick="loadXMLDoc()" >
<h1>单个用户</h1>
<div id="user"></div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/lishundi/article/details/81811246
今日推荐