Ajax操作真实接口

es6 模板字符串

${}获取变量内容

<script>
    let title = "快过过年了 好激动";
    let year = 2022 ;
    let str =`我是李四--${year}---${title}`;
    console.log(str);
    document.querySelector('body').innerHTML = str
</script>

Ajax操作真实接口

这个真实的接口 是用来登录的 所以使用post方式登录，用两个按钮来简易模拟，代码如下：

<button onclick="Getlogin()">请先登录</button><br><br>
<button onclick="getUserInfo()">获取用户数据</button>
<script>

    function getUserInfo() {
        if(!localStorage.token){
            alert('请先登录，获取token');
            return
        }
        let xhr = new XMLHttpRequest();
        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); */
                alert(res.meta.msg);
            }
        }
    }

    function Getlogin() {
        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) {
                console.log(xhr.responseText);
                let res = JSON.parse(xhr.responseText);
                console.log(res.meta.msg);
                /* alert(res.meta.msg) */
                localStorage.token = res.data.token;
            }
        }
    }
</script>