JS-Ajax请求

注册实例演示请求基本操作

• 先上html标签部分：

    <div class="pox">
     
        <div>
            <img src="sipclogo.png" alt="A logo of SIPC.">
        </div>
          
        <input type="text" class="input-normal" id="user" placeholder="用户名" value="">
        <input type="text" class="input-normal" id="password" placeholder="密码" value="">
        <div type="submit" id="btn-login" class="login">
            <p>登录</p>
            <div class="loading">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>        
        <svg class='checkmark' width='30px' height='30px' stroke='white' fill='none'>
            <polyline points='2,10 12,18 28,2'></polyline>
        </svg>

        <input type="submit" id="btn-register" value="注册">
    </div>

• 接下来前端发送请求部分：

    <script>
//window.onload表示在网页加载完毕后立刻执行的操作
        window.onload = function(){
//获取botton元素
            let register = document.getElementById("btn-register");
//绑定事件
            register.addEventListener("click",function() {
            let un1 = document.getElementById('user').value;
            let pwd1 = document.getElementById('password').value;
//创建对象
            let xhr = new XMLHttpRequest();
//初始化，设置请求方法和url
            xhr.open("POST","http://47.94.90.140:8888/api/register");
//设置send对象存data
            let send = {
                username: un1,
                password: pwd1
            }
//设置收发json格式数据
            xhr.setRequestHeader("Content-type","application/json");
//发送，将数据转化为json字符串
            xhr.send(JSON.stringify(send));
//处理服务端返回的结果
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status ===200 && xhr.status < 300) {
                        alert(JSON.parse(xhr.response).msg);
                    }
                }
            }
    </script>