JQuery 模糊查询用户
JQuery 是一款非常流行的 JavaScript 库，它提供了很多强大的功能，其中包括用于查询和操作 HTML 元素的函数。在本文中，我们将使用 JQuery 实现一个用户模糊查询功能，用户可以输入关键字来查找符合条件的用户。
第一步：准备工作
在 HTML 页面中，我们需要添加一个表单和用于显示搜索结果的元素。表单中包含一个文本框和一个按钮，用户可以在文本框中输入搜索关键字，然后通过按钮触发搜索操作。搜索结果将显示在一个带有 ID 的 HTML 元素中。
<form action="" method="get"> <label for="search">搜索用户：</label> <input type="text" name="search" id="search"> <button type="button" id="submit">搜索</button> </form> <div id="result"></div>
第二步：编写 JavaScript 代码实现用户搜索功能
在 JavaScript 中，我们需要获取用户输入的关键字，并使用 JQuery 发送 AJAX 请求。我们将服务器返回的结果解析为 JSON 对象，并将其显示在结果区域中。
// 绑定按钮的点击事件
$("#submit").click(function() {
var keyword = $("#search").val();
$.ajax({
url: "search.php",
type: "GET",
data: { keyword: keyword },
dataType: "json",
success: function(response) {
var html = "";
$.each(response, function(index, user) {
html += "<div><strong>" + user.name + "</strong> (" + user.username + ")</div>";
});
$("#result").html(html);
}
});
});在上面的代码中，我们使用 JQuery 的 $.ajax() 方法来发送 AJAX 请求。请求的 URL 是 search.php，HTTP 方法是 GET，数据包含一个 keyword 参数，值为用户输入的关键字。dataType 指定服务器返回的数据类型是 JSON。
成功返回数据后，我们使用 $.each() 方法遍历每个用户，将他们的名字和用户名添加到 HTML 字符串中。最后，我们将字符串设置为结果区域的 HTML 内容。
第三步：编写 PHP 代码处理用户搜索请求
在服务器端，我们需要使用 PHP 处理用户搜索请求。PHP 代码可以读取数据库中的用户信息，并根据用户输入的关键字查询匹配的用户，并将结果以 JSON 格式返回。
// 连接数据库
$con = mysqli_connect("localhost", "user", "password", "database") or die("数据库连接失败");
mysqli_set_charset($con, "utf8");
// 获取关键字
$keyword = isset($_GET["keyword"]) ? $_GET["keyword"] : "";
// 查询满足条件的用户
$query = mysqli_query($con, "SELECT * FROM users WHERE name LIKE '%$keyword%' OR username LIKE '%$keyword%'");
// 将结果转换为 JSON 格式并返回
$results = array();
while ($row = mysqli_fetch_assoc($query)) {
$results[] = $row;
}
header("Content-Type: application/json");
echo json_encode($results);在上面的代码中，我们首先连接数据库，并设置字符集为 UTF-8。然后获取用户输入的关键字，并执行 SQL 查询，查找名字或用户名中包含该关键字的用户。最后，将结果转换为数组并使用 json_encode() 方法将其转换为 JSON 格式，并设置 Content-Type 头为 application/json，以便客户端正确解析返回结果。
第四步：美化搜索结果的样式
为了使搜索结果更具可读性，我们可以添加一些样式来美化它。以下是一个简单的 CSS 样式，您可以将其添加到页面中。
#result div {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
#result div strong {
font-weight: bold;
font-size: 16px;
}这些样式将每个搜索结果添加边框和圆角，并增加了名称和用户名字体大小。
总结
在本文中，我们学习了如何使用 JQuery 和 PHP 实现用户模糊查询功能。我们首先准备了一个 HTML 表单和结果区域，然后编写 JavaScript 代码以实现 AJAX 请求。接下来，我们为 PHP 编写了一个查询脚本，并将结果返回给 JavaScript。最后，我们增加了一些样式来美化搜索结果区域。这些代码可以扩展为其他类型的查询或搜索操作，并且可以轻松地定制以适合具体的需求。
以上是jquery模糊查询用户的详细内容。更多信息请关注PHP中文网其他相关文章！
