以JSON格式将请求数据发到服务器
# 8-3: 以JSON格式将请求数据发到服务器
**知识点**
- `JSON.stringify()`
- 扩展知识: PHP中的 `json_decode()`函数
-----------------------------------------------------
## `JSON.stringify()`
- 将`JavaScript对象`转为`JSON`格式的字符串
- `JSON.stringify({name: 'peter', age: 30})`转换结果为:
+ `"{"name":"peter","age":30}"`
------------------------------------------------------
## PHP中的 `json_decode()`函数
- 将`JSON格式字符串`解析为`PHP对象`或`PHP数组`
------------------------------------------------------
### 示例: code/demo08-3.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>以JSON格式将请求数据发到服务器</title>
</head>
<body>
<p>
<label for="name">用户名:</label>
<input type="text" name="name" id="name" placeholder="用户名">
<span id="tips"></span>
</p>
<script>
/**
* 改一个请求发送函数的名称: postJSON()
* 删除参数解析函数
* 后端php脚本要重新写,解析json
*
*/
let p = document.getElementsByTagName('p').item(0);
let input = document.getElementById('name');
let tips = document.getElementById('tips');
// 处理请求的脚本
let url = 'temp/demo08-json.php';
// 失去焦点时验证
input.onblur = function () {
let data = {name: input.value};
postJSON(url, data, callback);
};
// 重获焦点清空提示信息
input.onfocus = function () {
tips.innerHTML = '';
};
// 发起POST请求
function postJSON(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');
// 发送请求, 直接转为json格式字符串
request.send('user=' + JSON.stringify(data));
}
// 请求成功后的回调处理: DOM操作
function callback(requst) {
tips.innerHTML = requst.responseText;
p.appendChild(tips);
}
</script>
</body>
</html>
```
### 处理脚本: temp/demo08-03.php
```php
<?php
//var_dump($_POST);
$user = json_decode($_POST['user']);
$name = $user->name;
$userList = ['admin','peter','zhu'];
if (in_array($name, $userList)) {
echo '<span style="color:red">用户名已存在,换一个呗~~</span>';
} else {
echo '<span style="color:green">用户名可用</span>';
}
exit();
```
