<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1 {
text-align: center;
}
table {
700px;
margin: 20px auto;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h1>学员信息表</h1>
<table border="1">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>手机</th>
<th>创建时间</th>
<th>状态</th>
</tr>
</thead>
<tbody id="mytbody">
<tr>
<td>收到</td>
<td>113@qq.com</td>
<td>收到</td>
<td>收到</td>
<td>收到</td>
</tr>
</tbody>
</table>
<script>
ajax post传参
var xhr = null;
try {
xhr = new XMLHttpRequest()
} catch (err) {
xhr = new ActiveXObject("Microsoft.XML")
}
调用open
xhr.open("post", "http://127.0.0.1:3000/VueHandler/AdminHandler?action=usershow", true)
调用send
post 传参 在send(参数)方法传参
post传参之前设置请求头
1. 表单类型的数据 name=1&age=2
xhr.setRequsetHeader("Content-type", "application/x-www-form-urlencoded")
2.json类型的数据 {name:1,age:2}
xhr.setRequsetHeader("Content-type", "application/json")
3.文件类型的数据 FormData数据包
xhr.setRequsetHeader("Content-type", "multipart/form-data")
设置请求头 的内容 提前发送到服务器端的键值对
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.send("pageStart=2")
等待数据返回
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText))
var res = JSON.parse(xhr.responseText);
var list = res.data.list;
var str = "";
for (var i = 0; i < list.length; i++) {
str += `
<tr>
<td>${list[i].userName}</td>
<td>${list[i].email}</td>
<td>${list[i].phone}</td>
<td>${new Date(list[i].createAt).toLocaleString()}</td>
<td>${list[i].isstate ? "已冻结" : "可用"}</td>
</tr>
`
}
var mytbody = document.getElementById("mytbody");
mytbody.innerHTML = str;
}
}
</script>
</body>
</html>