ajax前后端交互

1：通过ajax请求 将内容渲染到页面上

字符串拼接的方式渲染以及es6新的模板字符串类型

       var xhr = new XMLHttpRequest();
         xhr.open('get', 'data2.json', true);
           xhr.send();
             xhr.onreadystatechange = function () {
           if (xhr.readyState == 4) {
            var obj = JSON.parse(xhr.responseText);
            var str = '';
            for (var i in obj) {
                str +=
           
         /*  es6新的模板字符串类型
                    `
                          <div class="goods">
                              <img src="${obj[i].img1}">
                              <p class="dec">${obj[i].title}</p>
                              <p>:￥价格${obj[i].price}</p>    
                              </div>  
                          `
              
                       } */
          字符串拼接的方式
                    ' <div class="goods">' +
                    '<img src="' + obj[i].img1 + '">' +
                    '<p class="dec">' + obj[i].title + '</p>' +
                    '<p>:￥价格' + obj[i].paice + '</p>' +
                    '</div>'


            }
            document.querySelector('.box').innerHTML = str
        }
    }

2：原生方法操作真实接口：

首先：先登录

         function login() {
        let xhr = new XMLHttpRequest();
        let url = 'http://timemeetyou.com:8889/api/private/v1/login';
        xhr.open('post', url, true);
        let params = {
            username: "admin",
            password: "123456"
        }
        /* post需要添加请求头 */
        /* 请求回来的内容是json格式 */
        /* Content-type 表示请求内容的类型 */
        /* application/json 表示请求内容的类型的具体的值 */
        xhr.setRequestHeader("Content-type", "application/json")
        xhr.send(JSON.stringify(params));
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                let res = JSON.parse(xhr.responseText)
                console.log(res);
                localStorage.token = res.data.token;
            }
        }
    }

然后：获取用户数据

     <button onclick="login()">请先登录,再获得数据</button>
<p>
    <button onclick="getUserInfo()">获取用户数据</button>
</p>
<!-- 这个真实的接口 是用来登录的
所以使用post方式登录 -->
<script>
    function getUserInfo(){
        /* 需要先判断有没有token 有token 就不提示直接获取数据
        没有token 就给个提示 请先登录 获取token 不执行下面的内容 */
        let xhr = new XMLHttpRequest();
        /* pagenum=1 表示取第一页的数据 */
        /* pagesize=5 表示显示5条数据 */
        let url = 'http://timemeetyou.com:8889/api/private/v1/users?pagenum=1&pagesize=3';
        xhr.open('get', url, true);
        xhr.setRequestHeader('Authorization',localStorage.token)
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                let res = JSON.parse(xhr.responseText)
                console.log(res);
                
                
               
            }
        }
    }

data 后台有一些值

  "data": {
    "id": 28,
    "username": "tige1200",
    "mobile": "test",
    "type": 1,
    "openid": "",
    "email": "test@test.com",
    "create_time": "2017-11-10T03:47:13.533Z",
    "modify_time": null,
    "is_delete": false,
    "is_active": false

如果想要获取。先登录 在获取 然后再获取里面用字符拼接或是新的模板字符方式渲染： 例如：

       if(xhr.readyState==4){
             var res =JSON.parse(xhr.responseText);
             console.log(res);
           var str='';
             for(var i =0;i<res.data.users.length;i++){
              str+=
              `
              <div class="div1">
              <p>${res.data.users[i].id}</p>
              <p>${res.data.users[i].username}</p>
              <p>${res.data.users[i].email}</p>
              <p>${res.data.users[i].mobile}</p>
              </div>    
              `

             }
             document.querySelector('div').innerHTML=str
         }