原生方法操作真实接口

101 阅读1分钟
` <button onclick="login()">请先登录,再获得数据</button>
<p>
    <button onclick="getUserInfo()">获取用户数据</button>
</p>

`

login数据

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;
                    // location.href="shop.html"
                }
            }
        }

post需要添加请求头

请求回来的内容是json格式

Content-type 表示请求内容的类型

application/json 表示请求内容的类型的具体的值

读取数据

function getUserInfo(){
            /* 需要先判断有没有token 有token 就不提示直接获取数据
            没有token 就给个提示 请先登录 获取token 不执行下面的内容 */
            if(!localStorage.token){
                alert('请先登录,获取token!!')
                return;
            }
            let xhr = new XMLHttpRequest();
            /* pagenum=1 表示取第一页的数据 */
            /* pagesize=5 表示显示5条数据 */
            let url = 'http://timemeetyou.com:8889/api/private/v1/users?pagenum=1&pagesize=6';
            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);
                }
            }
        }

需要先判断有没有token 有token 就不提示直接获取数据 没有token 就给个提示 请先登录 获取token 不执行下面的内容

pagenum=1 表示取第一页的数据

pagesize=5 表示显示5条数据