处理POST请求一个实例
# 3. 处理POST请求一个实例
**知识点**
- `send(data)`
## 1. `send(data)`
- `request.send(data)`
- 必须给`send()`方法传入参数
- 参数是请求头方式发送,不在URL地址中
- 不仅更安全,也可以发送更大量的数据
-------------------------------------------------
### 示例: code/demo08-2.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>处理POST请求一个实例</title>
</head>
<body>
<p>
<label for="name">用户名:</label>
<input type="text" name="name" id="name" placeholder="用户名">
<span id="tips"></span>
</p>
<script>
/**
* 只需要修改请求处理函数: getData()即可
* 1. 函数名称改成: postData
* 2. 在open()和send()方法中设置请求头信息
* 3. send()中要有请求参数
* 4. 修改onblur()事件中的调用方法
*/
let p = document.getElementsByTagName('p').item(0);
let input = document.getElementById('name');
let tips = document.getElementById('tips');
// 处理请求的脚本
let url = 'temp/demo08.php';
// 失去焦点时验证
input.onblur = function () {
let data = {name: input.value};
postData(url, data, callback);
};
// 重获焦点清空提示信息
input.onfocus = function () {
tips.innerHTML = '';
};
// 发起POST请求
function postData(url, data, callback) {
// 创建XHR请求对象
let request = new XMLHttpRequest();
// 设置XHR请求状态变化监听事件
request.onreadystatechange = function () {
if (request.readyState === 4 && callback) callback(request);
};
// 设置请求参数,post请求,不用设置在url后拼接键值对
request.open('POST',url);
// 处理post请求,必须设置请求头信息,模拟表单提交
request.setRequestHeader('content-type','application/x-www-form-urlencoded');
// 发送请求
request.send(encodeFormData(data));
}
// 请求成功后的回调处理: DOM操作
function callback(requst) {
tips.innerHTML = requst.responseText;
p.appendChild(tips);
}
// 解析请求参数
function encodeFormData(data) {
if (!data) return '';
let pairs = []; // 配对容器
for (let name in data) {
// 过滤掉继承属性和函数属性,确保是自有属性,且没有方法(即函数类型的属性)
if (data.hasOwnProperty(name) && typeof data[name] !== 'function') {
// 将值转为字符串
let value = data[name].toString();
// encodeURIComponent()对URL中的键值对进行编码
name = encodeURIComponent(name.replace('%20', '+'));
value = encodeURIComponent(value.replace('%20', '+'));
// 将转换好的键值对,存入容器中
pairs.push(name + '=' + value);
}
}
return pairs.join('&'); // 将键值对之间用'&'拼接后返回
}
</script>
</body>
</html>
```
### code/temp/demo08.php
```php
<?php
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : null;
$name = htmlspecialchars(trim($name));
$userList = ['admin','peter','zhu'];
if (in_array($name, $userList)) {
echo '<span style="color:red">用户名已存在,换一个呗~~</span>';
} else {
echo '<span style="color:green">用户名可用</span>';
}
exit();
```
