js通过AJAX获取后台数据渲染到页面
程序员文章站
2022-07-12 19:11:25
...
1.GET
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX发送GET请求并传递参数</title>
</head>
<body>
<ul id="list"></ul>
<script>
// 获取ul的id
var listElement = document.getElementById('list');
// 发送ajax请求获取列表数据呈现在也页面
// ====================================
var xhr = new XMLHttpRequest();
// 打开网址
xhr.open('GET','users.php');
// 敲回车等响应
xhr.send();
// 接收请求
xhr.onreadystatechange = function(){
//判断请求题是不是我们想要的数据
if(this.readyState !== 4) return;
// 获取传过来的json数据
var data = JSON.parse(this.responseText);
//data ==> 数据
// for循环创建动态li
for(var i=0; i<data.length; i++ ){
// 创建动态li标签
var liElement = document.createElement('li');
// 给li添加数据
liElement.innerHTML = data[i].name;
// 给li添加id
liElement.id = data[i].id;
// 把li追加到ul里面去
listElement.appendChild(liElement);
// 获取点击元素的数据
liElement.addEventListener('click',function(){
var xhr2 = new XMLHttpRequest();
// 打开文件
xhr2.open('GET','users.php?id='+ this.id); //问号传参
// 敲回车等响应
xhr2.send();
console.log(this.id);
xhr2.onreadystatechange = function(){
//判断请求题是不是我们想要的数据
if(this.readyState !== 4) return;
// 获取传过来的json数据
var data2 = JSON.parse(this.responseText);
//data ==> 数据
console.log(data2);
};
});
}
}
</script>
</body>
</html>
php部分
<?php
header('Content-Type: application/json');
/**
* 返回的响应就是一个 JSON 内容（返回的就是数据）
* 对于返回数据的地址一般我们称之为接口（形式上是 Web 形式）
*/
// `/users.php?id=1` => id 为 1 的用户信息
$data = array(
array(
'id' => 1,
'name' => '张三',
'age' => 18
),
array(
'id' => 2,
'name' => '李四',
'age' => 20
),
array(
'id' => 3,
'name' => '二*',
'age' => 18
),
array(
'id' => 4,
'name' => '三愣子',
'age' => 19
)
);
if (empty($_GET['id'])) {
// 没有 ID 获取全部
// 因为 HTTP 中约定报文的内容就是字符串，而我们需要传递给客户端的信息是一个有结构的数据
// 这种情况下我们一般采用 JSON 作为数据格式
$json = json_encode($data); // => [{"id":1,"name":"张三"},{...}]
echo $json;
} else {
// 传递了 ID 只获取一条
foreach ($data as $item) {
if ($item['id'] != $_GET['id']) continue;
$json = json_encode($item); // => [{"id":1,"name":"张三"},{...}]
echo $json;
}
}
2.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';
// 获取文本框内的value值
var username = txtUsername.value;
var password = txtPassword.value;
// 发送post事件
var xhr =new XMLHttpRequest();
// 获取浏览器
xhr.open('POST','login.php');
// post响应操作
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// xhr.send('username=' + username + '&password=' + password); 方法1;
xhr.send(`username=${username}&password=${password}`); //方法二
// 获取服务器反馈
xhr.onreadystatechange = function(){
// 判断接收的数据
if(this.readyState !== 4) return;
//获取提示文本
alert(this.responseText);
// 隐藏加载中
loading.style.display = 'none';
}
}
</script>
</body>
</html>
php部分
<?php
// 校验用户输入的用户名和密码
if(empty($_POST['username']) && empty($_POST['password']) ){
exit('请输入用户名或密码');
}
$username = $_POST['username'];
$password = $_POST['password'];
// 校验密码是否正确
if($username === 'zhangs' && $password === '123456' ){
exit('登录成功');
}
exit('请输入正确的用户名或密码');
?>
推荐阅读