Ajax -post 请求


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX发送POST请求</title>
    <style>
        #loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #555;
            opacity: .5;
            text-align: center;
            line-height: 300px;
        }

        #loading::after {
            content: '加载中...';
            color : #fff;
        }
    </style>
</head>
<body>
<div id="loading"></div>
<table border="1">
    <tr>
        <td>用户名</td>
        <td><input type="text" id="username"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="password" id="password"></td>
    </tr>
    <tr>
        <td></td>
        <td><button id="btn">登录</button></td>
    </tr>
</table>
<script>

    // 找一个合适的时机，做一件合适的事情
    var btn = document.getElementById('btn');
    // 1. 获取界面上的元素 value
    var txtUsername = document.getElementById('username');
    var txtPassword = document.getElementById('password');
    var loading = document.getElementById('loading');

    btn.onclick = function () {
        loading.style.display = 'block';
        var username = txtUsername.value;
        var password = txtPassword.value;
        // 2. 通过 XHR 发送一个 POST 请求
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'login.php');
        // !!! 一定注意 如果请求体是 urlencoded 格式 必须设置这个请求头 ！！！
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // xhr.send('username=' + username + '&password=' + password)
        xhr.send(`username=${username}&password=${password}`);
        // 3. 根据服务端的反馈 作出界面提示
        xhr.onreadystatechange = function () {
            if (this.readyState !== 4) return;
            console.log(this.responseText);
            loading.style.display = 'none'
        }
    }

</script>
</body>
</html>
猜你喜欢
