PHP MySQL Ajax 实时搜索
在本教程中,您将学习如何使用 PHP 和 Ajax 创建实时 MySQL 数据库搜索功能。
Ajax 实时数据库搜索
您可以使用 Ajax 和 PHP 创建一个简单的实时数据库搜索功能,当您开始在搜索输入框中键入一些字符时,搜索结果将显示在其中。
在本教程中,我们将创建一个实时搜索框,它将搜索 countries 表并异步显示结果。 但是,首先我们需要创建这个表。
第 1 步:创建数据库表
执行以下 SQL 查询以在 MySQL 数据库中创建 countries 表。
示例
DownloadCREATE TABLE countries (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(50) NOT NULL
);
创建表后,您需要使用 SQL INSERT
语句 填充一些数据。 或者,您可以通过单击下载按钮下载预填充的 countries 表并将其导入您的 MySQL 数据库。
有关语法的详细信息,请查看 SQL CREATE TABLE
语句 的教程 用于在 MySQL 数据库系统中创建表。
第 2 步:创建搜索表单
现在,让我们创建一个简单的 Web 界面,允许用户实时搜索 countries 表中可用的地区名称,就像自动完成或预先输入一样。
创建一个名为"search-form.php"的 PHP 文件并将以下代码放入其中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style>
body{
font-family: Arail, sans-serif;
}
/* 格式化搜索框 */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* 格式化结果项 */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* 获取更改的输入值 */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("backend-search.asp", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// 在点击结果项时设置搜索输入值
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search country..." />
<div class="result"></div>
</div>
</body>
</html>
每次搜索输入的内容发生更改或搜索输入发生 keyup 事件时,jQuery 代码(第 47 行到第 67 行)都会向"backend-search.php"文件发送一个 Ajax 请求,该文件检索 countries 表中与搜索词相关的记录。 这些记录稍后将由 jQuery 插入到 <div>
中并显示在浏览器上。
第 3 步:在后端处理搜索查询
这是我们的"backend-search.php"文件的源代码,它根据 Ajax 请求发送的查询字符串搜索数据库并将结果发送回浏览器。
<?php
/* 尝试 MySQL 服务器连接。 假设您正在运行 MySQL
具有默认设置的服务器(用户 'root' 没有密码) */
$link = mysqli_connect("localhost", "root", "", "demo");
// 检查连接
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
if(isset($_REQUEST["term"])){
// 准备一个选择语句
$sql = "SELECT * FROM countries WHERE name LIKE ?";
if($stmt = mysqli_prepare($link, $sql)){
// 将变量作为参数绑定到准备好的语句
mysqli_stmt_bind_param($stmt, "s", $param_term);
// 设置参数
$param_term = $_REQUEST["term"] . '%';
// 尝试执行准备好的语句
if(mysqli_stmt_execute($stmt)){
$result = mysqli_stmt_get_result($stmt);
// 检查结果集中的行数
if(mysqli_num_rows($result) > 0){
// 以关联数组的形式获取结果行
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>No matches found</p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}
// 关闭语句
mysqli_stmt_close($stmt);
}
// 关闭连接
mysqli_close($link);
?>
SQL SELECT
语句与 LIKE
运算符(line no-16)结合使用,在countries 数据库表中查找匹配记录。 我们实施了 预备语句 以获得更好的搜索性能以及防止 SQL注入 攻击。
注意: 在 SQL 语句中使用用户输入之前,请始终过滤和验证用户输入。 您还可以使用 PHP mysqli_real_escape_string()
函数来转义用户输入中的特殊字符并创建合法的 SQL 字符串以防止 SQL 注入。