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中文網其他相關文章！
