ajax需要的是json的数据格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
form {
width: 400px;
height: 150px;
margin: 0 auto;
}
.item {
display: flex;
height: 50px;
align-items: center;
}
.item label {
flex: 2;
}
.item input {
flex: 4;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>用户名</td>
<td>密码</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<h2 id="h2"></h2>
<button id="sendAJAXBtn">点我发送AJAX请求</button>
<script>
// AJAX: Asynchronous Javascript And XML (异步的JS和XML)
// XML: 可拓展标记语言 用于前后端传递数据 用于后端的配置文件 现在因为前后端之间传递数据用的都是JSON所以基本不怎么用XML来传递数据
// 异步发送一个HTTP请求,去后端获取数据,带回给前端浏览器,让浏览器处理。
// AJAX不是一门技术,是一整套技术体系 包含HTML、CSS、DOM、BOM、JSON等
// AJAX兼容性很好,兼容到IE5
// 获取元素
let sendAJAXBtn = document.getElementById("sendAJAXBtn");
let tbody = document.querySelector("tbody");
let h2 = document.getElementById("h2");
// 绑定事件
sendAJAXBtn.onclick = function() {
//创建ajax对象
var xhr = new XMLHttpRequest();
//配置ajax对象
xhr.open('get', 'http://localhost/day2(http)/03.php', true);
//发送请求
xhr.send();
//监听
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
try {
console.log(JSON.parse(xhr.responseText));
var object = JSON.parse(xhr.responseText);
object.data.forEach(item => {
tbody.innerHTML += `
<tr><td>${item.username}</td><td>${item.password}</td></tr>
`;
})
} catch (e) {
console.log(e);
}
}
}
console.log(1);
}
// 接口文档
// 包含的信息通常有:
/*
url: http://localhost/03.php
type: get
data:
username 用户名 string 8~12
password 密码 string 8~16
responseData:
{
error: 0 成功 1 服务器故障 2 数据库故障 3 ...
data: 返回信息
}
*/
</script>
</body>
</html>
<?php
header("content-type:text/html;charset=utf-8");
//连接数据库
mysql_connect("localhost","root","root");
//选择数据库
mysql_select_db("gz2006");
//sql语句
$sql = "SELECT * FROM user";
//执行sql语句
$result = mysql_query($sql);
//新建一个空数组
$arr=array();
//通过 将数据一条一条放入数组
while($row=mysql_fetch_array($result)){
array_push($arr,$row);
}
//生成一个对象
$arr1=array("error"=>0,"data"=>$arr);
echo json_encode($arr1);
//关闭数据库
mysql_close();
?>