POST 请求过程中，都是采用请求体承载需要提交的数据
var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method xhr.open(‘POST‘, ‘./add.php‘)
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded // 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据 xhr.setRequestHeader(‘Content‐Type‘, ‘application/x‐www‐form‐urlencoded‘)
// 需要提交到服务端的数据可以通过 send 方法的参数传递 // 格式：key1=value1&key2=value2 xhr.send(‘key1=value1&key2=value2‘)
xhr.onreadystatechange = function () { if (this.readyState === 4) { console.log(this.responseText) } }
练习代码
<!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>
