在本教程中,您将学习如何使用PHP和Ajax创建实时MySQL数据库搜索功能。
您可以使用Ajax和PHP创建简单的实时数据库搜索功能,当您在搜索输入框中开始键入某些字符时,将显示搜索结果。
在本教程中,我们将创建一个实时搜索框,该搜索框将搜索countries表并异步显示结果。但是,首先我们需要创建该表。
执行以下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数据库系统中创建表的语法的详细信息。
现在,让我们创建一个简单的Web界面,该界面允许用户实时搜索“countries”表中可用的国家/地区名称,就像自动填充或预先输入一样。
创建一个名为“ search-form.php”的PHP文件,并将以下代码放入其中。
<!DOCTYPE html> <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插入到<div>并显示在浏览器中。
这是我们的“ backend-search.php”文件的源代码,该文件根据Ajax请求发送的查询字符串搜索数据库并将结果发送回浏览器。
<?php /* 尝试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 "<p>" . $row["name"] . "</p>"; } } else{ echo "<p>没有找到匹配的记录</p>"; } } else{ echo "错误:无法执行 $sql. " . mysqli_error($link); } } //结束语句 mysqli_stmt_close($stmt); } //关闭连接 mysqli_close($link); ?>
<?php /* 尝试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 "<p>" . $row["name"] . "</p>"; } } else{ echo "<p>没有找到匹配的记录</p>"; } } else{ echo "错误:无法执行 $sql. " . mysqli_error($link); } } //结束语句 $stmt->close(); } //关闭连接 $mysqli->close(); ?>
<?php /* 尝试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 "<p>" . $row["name"] . "</p>"; } } else{ echo "<p>没有找到匹配的记录</p>"; } } } catch(PDOException $e){ die("错误:无法执行 $sql. " . $e->getMessage()); } //结束语句 unset($stmt); //关闭连接 unset($pdo); ?>
SQL SELECT语句与LIKE运算符结合使用,以在countries数据库表中查找匹配的记录。我们实现了预处理语句,以提高搜索性能并防止SQL注入攻击。
注意:在SQL语句中使用用户输入之前,请始终对其进行过滤和验证。您还可以使用PHP mysqli_real_escape_string()函数来转义用户输入中的特殊字符,并创建合法的SQL字符串以防止SQL注入。