响应方法
在这里,我们假设您已经了解了基本的 AJAX 和 PHP,并且您已经有一个工作的数据库。
首先,让我们创建一个名为 getuser.php 的文件,该文件将从数据库获取用户数据并返回结果。该文件应该具有以下内容:
<?php // 定义数据库连接常量
define(‘DB_HOST’, ‘localhost’);
define(‘DB_USER’, ‘root’);
define(‘DB_PASS’, ”);
define(‘DB_NAME’, ‘ajax_demo’);
// 连接数据库
$connect = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
// 检查数据库连接是否成功
if (mysqli_connect_errno($connect)) {
die("连接失败: " . mysqli_connect_error());
}
// 获取用户数据
$result = mysqli_query($connect, “SELECT * FROM users”);
// 把查询结果转换为 JSON 格式的数组
$userData = array();
while ($row = mysqli_fetch_array($result)) {
$userData[] = $row;
}
echo json_encode($userData);
// 关闭查询结果和数据库连接
mysqli_free_result($result);
mysqli_close($connect);
?>
接下来,让我们编写一个 AJAX 请求,该请求将向 getuser.php 文件发送 GET 请求,并在成功时将响应输出到页面上。
jQuery 的 Ajax
jQuery 提供了一个方便的方式来执行 AJAX 请求,并在响应时更新 DOM。以下是一个使用 jQuery 的示例:
<!DOCTYPE html>
<html>
<head>
<title>Ajax 短连接数据库</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h2>用户信息</h2>
<table id="userTable" border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>电子邮件</th>
</tr>
</table>
<script>
// 定义获取用户数据的函数
function getUsers() {
// 发送 AJAX 请求并获取响应
$.get("getuser.php", function(data) {
// 把响应转换为 JSON 对象
var json = JSON.parse(data);
// 遍历 JSON 对象并在表格中显示用户数据
var html = "";
for(var i=0; i < json.length; i++) {
html += "<tr>";
html += "<td>" + json[i].id + "</td>";
html += "<td>" + json[i].name + "</td>";
html += "<td>" + json[i].age + "</td>";
html += "<td>" + json[i].email + "</td>";
html += "</tr>";
}
$("#userTable").append(html);
});
}
// 在页面加载完后执行获取用户数据的函数
$(document).ready(getUsers);
</script>
</body>
</html>
该示例将显示一个表格,其中包含从 getuser.php 文件获取的用户数据。当页面加载完成时,它将自动调用 getUsers() 函数,并向服务器发送一个 GET 请求。在成功时,它将迭代 JSON 对象中的每个用户,并将 HTML 插入表格行。
实现方式有多种,以下是其中一种简单的实现方法:
1.在前端页面通过ajax发送短连接请求;
2.后端接收到请求后,将请求参数存入数据库中,并返回一个标识符id给前端;
3.前端通过定时器不断向后端发送请求,传递当前id,后端根据id查询数据库并返回对应的结果;
4.前端收到返回结果后更新页面。
代码示例:
前端:
//发送短连接请求
$.ajax({
url: 'backend.php',
type: 'post',
data: { action: 'create' },
success: function(id){
//保存id
localStorage.setItem('shortLinkId', id);
}
});
//定时器请求结果
setInterval(function(){
//获取当前id
var id = localStorage.getItem('shortLinkId');
if(id){
//发送查询请求
$.ajax({
url: 'backend.php',
type: 'post',
data: { action: 'query', id: id },
success: function(result){
if(result){
//更新页面
$('.result').html(result);
}
}
});
}
}, 1000);
后端:
//连接数据库
$conn = mysqli_connect("localhost", "root", "", "test");
//创建短连接
if($_POST['action'] == 'create'){
$id = uniqid();
mysqli_query($conn, "INSERT INTO short_links(id, status) VALUES ('$id', 0)");
echo $id;
}
//查询短连接结果
if($_POST['action'] == 'query'){
$id = $_POST['id'];
$result = mysqli_query($conn, "SELECT * FROM short_links WHERE id='$id'");
$row = mysqli_fetch_assoc($result);
if($row['status'] == 1){
echo $row['result'];
//删除记录
mysqli_query($conn, "DELETE FROM short_links WHERE id='$id'");
}
}
数据库表结构:
CREATE TABLE `short_links` (
`id` varchar(32) NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '0',
`result` text,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
说明:
该示例中的后端代码为简化版,实际应用中需要考虑多线程、多进程等并发问题,并采用更加健壮的代码来处理请求和结果的存储和查询。此外,还需要考虑短连接的有效期、安全性等问题。
发布者:luotuoemo,转转请注明出处:https://www.jintuiyun.com/158124.html