Ajax的post使用

先创建一个表单 form 和 输入框 input

<form method="post">
        <div class="border-radius"></div>
        <!-- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" /> -->
        <input type="text" name="username" id="username" placeholder="用户名"><br>
        <input type="password" name="password" id="password" placeholder="密码"><br>
        <input type="submit" name="submit" onclick="submi()" value="登陆" class="btn">
</form>

在对我们的js代码进行编写

1.获取我们表单中输入框value的数据

2.创建异步对象

3.发送数据去后台进行校验取得动态验证码

4.进行html协议校验

5.我们要发送的数据

6.发送并接收返回值

function submi() {
        // dom获取输入框中内容
        const username = document.getElementById("username").value
        const password = document.getElementById("password").value
        // 创建异步对象
        const xhr = new XMLHttpRequest();
        // 发送数据去后台进行校验取得动态验证码
        xhr.open('post','IP端口');
        // 进行html协议校验
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 我们要发送的数据
        xhr.send('username=uername&password=password')
        // 发送并接收返回值
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert("发送成功")
            } else{
                alert("发送失败")
            }
        }
    }