2. POST 请求
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) } }
案例：ajax使用post请求实现登陆
login.php
<?php // 接收用户提交的用户名密码 if (empty($_POST['username']) || empty($_POST['password'])) { // echo ; exit('请提交用户名和密码'); } // 校验 $username = $_POST['username']; $password = $_POST['password']; if ($username === 'admin' && $password === '123') { exit('恭喜你'); } exit('用户名或者密码错误'); // 响应
ajax-post.html
<!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>
