Ajax 请求json数据

一. 请求单个json数据

1. 建立两个json文件，user.json拥有一个用户信息对象，users.json拥有多个用户信息对象的数组。html文件中有两个button按钮，分别用来请求两个json数据文件。

• 利用xhr对象和onload请求方法，将user.json的json数据请求出来。

  
  

• 点击按钮出现如下效果，成功请求到json数据。

  
  

2. 将onload请求中的代码略加修改，使得let user = this.responseText,并打印user的name属性值console.log(user.name)，发现打印出undefined而不是刚才json中的name属性值"Arya"。

<button id="btn1">请求单个用户</button>
    <button id="btn2">请求所有用户</button>
    <br>

    <h1>单个用户</h1>
    <div id="user"></div>

    <h1>所有用户</h1>
    <div id="users"></div>

    <script>
        let btn1 = document.getElementById("btn1")
        btn1.addEventListener("click",loadUser);
        function loadUser(){
            let xhr = new XMLHttpRequest();
            xhr.open("GET","user.json",true);
            xhr.onload = function(){
                if(this.status == 200){
                    let user = this.responseText;
                    console.log(user.name);
                }              
            }
            xhr.send();
        }
    </script>

• 这是因为，我们获取到的是json数据，需要将他解析为对象后再使用。

xhr.onload = function(){
  if(this.status == 200){
       let user = JSON.parse(this.responseText);
       console.log(user.name);
  }              
}

3. 将请求到的json数据赋值到dom中，如下例放到ul中

let btn1 = document.getElementById("btn1")
        btn1.addEventListener("click",loadUser);
        function loadUser(){
            let xhr = new XMLHttpRequest();
            xhr.open("GET","user.json",true);
            xhr.onload = function(){
                if(this.status == 200){
                    let user = JSON.parse(this.responseText);
                    let output = '';
                    output += `
                        <ul>
                            <li>${user.id}</li>
                            <li>${user.name}</li>
                            <li>${user.email}</li>
                        </ul>
                    `
                    document.getElementById("user").innerHTML = output;
                }              
            }
            xhr.send();
        }

二. 请求多个json数据

• 请求users.json中的数据，与申请单个user.json数据的不同之处在于遍历数组。

 function loadUsers(){
            let xhr = new XMLHttpRequest();
            xhr.open("GET","users.json",true);
            xhr.onload = function(){
                if(this.status == 200){
                    let users = JSON.parse(this.responseText);
                    let output = '';
                    //遍历数组
                    for(let i in users){
                        output += `
                        <ul>
                            <li>${users[i].id}</li>
                            <li>${users[i].name}</li>
                            <li>${users[i].email}</li>
                        </ul>`
                    }
                    document.getElementById("users").innerHTML = output;
                }              
            }
            xhr.send();
        }