在本教程中,您将学习如何使用PHP和Ajax创建实时MySQL数据库搜索功能。
Ajax实时数据库搜索
您可以使用Ajax和PHP创建简单的实时数据库搜索功能,当您在搜索输入框中开始键入某些字符时,将显示搜索结果。
在本教程中,我们将创建一个实时搜索框,该搜索框将搜索countries表并异步显示结果。但是,首先我们需要创建该表。
步骤1:创建数据库表
执行以下SQL查询以在MySQL数据库中创建countries表。
CREATE TABLE countries (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(50) NOT NULL
);
创建表后,您需要使用SQL INSERT语句填充一些数据。
如果不熟悉创建表的步骤,请查看有关SQL CREATE TABLE语句的教程,以获取有关在MySQL数据库系统中创建表的语法的详细信息。
步骤2:建立搜索表单
现在,让我们创建一个简单的Web界面,该界面允许用户实时搜索“countries”表中可用的国家/地区名称,就像自动填充或预先输入一样。
创建一个名为“ search-form.php”的PHP文件,并将以下代码放入其中。
<html>
<head>
<meta charset="UTF-8">
<title>PHP MySQL 数据库实时搜索</title>
<style type="text/css">
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;
}
/* Formatting result items */
.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-1.12.4.min.js"></script>
<script type="text/javascript">
$(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.php", {term: inputVal}).done(function(data){
//在浏览器中显示返回的数据
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>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search country..." />
<div class="result"></div>
</div>
</html>
每次更改搜索输入的内容或在搜索输入上发生键入事件时,jQuery代码将Ajax请求发送至“ backend-search.php”文件,该文件从与国家/地区相关的countries表中检索记录搜索的字词。这些记录稍后将由jQuery插入到
步骤3:在后端处理搜索查询
这是我们的“ backend-search.php”文件的源代码,该文件根据Ajax请求发送的查询字符串搜索数据库并将结果发送回浏览器。
在线示例:面向过程方式
/* 尝试MySQL服务器连接。 假设您正在运行MySQL
具有默认设置的服务器(用户“ root”,无密码) */
$link = mysqli_connect("localhost", "root", "", "demo");
//检查连接
if($link === false){
die("错误:无法连接。 " . mysqli_connect_error());
}
if(isset($_REQUEST["term"])){
//预处理select语句
$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"] . '%';
// Attempt to执行预处理语句
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 "
"
. $row["name"] . "";
}
} else{
echo "
没有找到匹配的记录
";
}
} else{
echo "错误:无法执行 $sql. " . mysqli_error($link);
}
}
//结束语句
mysqli_stmt_close($stmt);
}
//关闭连接
mysqli_close($link);
?>
在线示例:面向对象方式
/* 尝试MySQL服务器连接。 假设您正在运行MySQL
具有默认设置的服务器(用户“ root”,无密码) */
$mysqli = new mysqli("localhost", "root", "", "demo");
//检查连接
if($mysqli === false){
die("错误:无法连接。 " . $mysqli->connect_error);
}
if(isset($_REQUEST["term"])){
//select预处理语句
$sql = "SELECT * FROM countries WHERE name LIKE ?";
if($stmt = $mysqli->prepare($sql)){
//将变量作为参数绑定到预处理语句
$stmt->bind_param("s", $param_term);
//设置参数
$param_term = $_REQUEST["term"] . '%';
// 尝试执行预处理语句
if($stmt->execute()){
$result = $stmt->get_result();
//检查结果集中的行数
if($result->num_rows > 0){
//获取结果行作为关联数组
while($row = $result->fetch_array(MYSQLI_ASSOC)){
echo "
"
. $row["name"] . "";
}
} else{
echo "
没有找到匹配的记录
";
}
} else{
echo "错误:无法执行 $sql. " . mysqli_error($link);
}
}
//结束语句
$stmt->close();
}
//关闭连接
$mysqli->close();
?>
在线示例:PDO方式
/* 尝试MySQL服务器连接。 假设您正在运行MySQL
具有默认设置的服务器(用户“ root”,无密码) */
try{
$pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
//将PDO错误模式设置为异常
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("错误:无法连接。 " . $e->getMessage());
}
//尝试执行搜索查询
try{
if(isset($_REQUEST["term"])){
//创建预处理语句
$sql = "SELECT * FROM countries WHERE name LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST["term"] . '%';
//绑定参数到语句
$stmt->bindParam(":term", $term);
//执行预处理语句
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "
"
. $row["name"] . "";
}
} else{
echo "
没有找到匹配的记录
";
}
}
} catch(PDOException $e){
die("错误:无法执行 $sql. " . $e->getMessage());
}
//结束语句
unset($stmt);
//关闭连接
unset($pdo);
?>
SQL SELECT语句与LIKE运算符结合使用,以在countries数据库表中查找匹配的记录。我们实现了预处理语句,以提高搜索性能并防止SQL注入攻击。
注意:在SQL语句中使用用户输入之前,请始终对其进行过滤和验证。您还可以使用PHP mysqli_real_escape_string()函数来转义用户输入中的特殊字符,并创建合法的SQL字符串以防止SQL注入。