2023jquery模糊查询用户

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模糊查询用户的详细内容，更多请关注zzsucai.com其它相关文章！