jquery 퍼지 쿼리 사용자

JQuery 퍼지 쿼리 사용자

JQuery는 HTML 요소를 쿼리하고 조작하는 기능을 포함하여 많은 강력한 기능을 제공하는 매우 인기 있는 JavaScript 라이브러리입니다. 이번 글에서는 JQuery를 이용해 사용자 퍼지 쿼리 기능을 구현해보겠습니다. 사용자는 키워드를 입력해 조건에 ​​맞는 사용자를 찾을 수 있습니다.

1단계: 준비

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>

2단계: 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임을 지정합니다. $.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

데이터를 성공적으로 반환한 후 $.each() 메서드를 사용하여 각 사용자를 반복하고 해당 이름과 사용자 이름을 HTML 문자열에 추가합니다. 마지막으로 문자열을 결과 영역의 HTML 콘텐츠로 설정합니다.

3단계: 사용자 검색 요청을 처리하는 PHP 코드 작성

서버 측에서는 PHP를 사용하여 사용자 검색 요청을 처리해야 합니다. PHP 코드는 데이터베이스의 사용자 정보를 읽고, 사용자가 입력한 키워드를 기반으로 일치하는 사용자를 쿼리하고, 결과를 JSON 형식으로 반환할 수 있습니다.

#result div {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#result div strong {
  font-weight: bold;
  font-size: 16px;
}

위 코드에서는 먼저 데이터베이스에 연결하고 문자 집합을 UTF-8로 설정합니다. 그런 다음 사용자가 입력한 키워드를 가져와서 SQL 쿼리를 실행하여 해당 키워드가 포함된 이름이나 사용자 이름을 가진 사용자를 찾습니다. 마지막으로 결과를 배열로 변환하고 json_encode() 메서드를 사용하여 JSON 형식으로 변환하고 Content-Type 헤더를 application/json으로 설정합니다. 클라이언트는 이를 올바르게 구문 분석할 수 있습니다. 결과를 반환합니다.

4단계: 검색 결과의 스타일을 아름답게 만들기

검색 결과를 더 읽기 쉽게 만들기 위해 몇 가지 스타일을 추가하여 아름답게 만들 수 있습니다. 다음은 페이지에 추가할 수 있는 간단한 CSS 스타일입니다. 🎜rrreee🎜이러한 스타일은 각 검색 결과에 테두리와 둥근 모서리를 추가하고 이름과 사용자 이름 글꼴 크기를 늘립니다. 🎜🎜요약🎜🎜이 기사에서는 JQuery와 PHP를 사용하여 사용자 퍼지 쿼리 기능을 구현하는 방법을 배웠습니다. 먼저 HTML 양식과 결과 영역을 준비한 다음 AJAX 요청을 구현하기 위한 JavaScript 코드를 작성했습니다. 다음으로, PHP용 쿼리 스크립트를 작성하고 결과를 JavaScript로 반환했습니다. 마지막으로 검색 결과 영역을 깔끔하게 만들기 위해 몇 가지 스타일을 추가했습니다. 이러한 코드는 다른 유형의 쿼리 또는 검색 작업을 위해 확장될 수 있으며 특정 요구 사항에 맞게 쉽게 사용자 정의할 수 있습니다. 🎜

위 내용은 jquery 퍼지 쿼리 사용자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!