模糊查詢是一種常見的需求，例如，在一個大型的用戶數據庫中，我們想要根據用戶的姓名來進行查詢，但是不是所有的用戶都能準確地記住自己的姓名，有時候可能只記得一部分。這時候，我們就需要使用模糊查詢來模糊地匹配用戶的姓名。在這篇文章中，我們將使用Ajax來實現一個簡單的模糊查詢功能。通過這個例子，我們將會了解到Ajax的基本使用方法以及如何在前端頁面中進行模糊查詢。
首先，我們需要在前端頁面上添加一個輸入框和一個結果顯示區域。下面是一個簡單的HTML代碼：
<p>請輸入需要模糊查詢的姓名：</p>
<input type="text" id="nameInput">
<br>
<button onclick="performQuery()">查詢</button>
<div id="resultArea"></div>在這段代碼中，我們創建了一個輸入框和一個按鈕。當用戶在輸入框中輸入查詢條件并點擊按鈕時，我們將觸發一個名為“performQuery()”的JavaScript函數來執行查詢操作。查詢結果將會顯示在一個名為“resultArea”的
接下來，我們需要實現“performQuery()”函數來處理查詢操作。在這個函數中，我們將使用Ajax來向后端發送查詢請求，并將查詢結果顯示在前端頁面上。下面是一個簡單的JavaScript代碼：
function performQuery() {
var input = document.getElementById("nameInput").value; // 獲取用戶輸入的查詢條件
var xhr = new XMLHttpRequest(); // 創建一個AJAX對象
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // 當請求完成并且響應狀態碼為200時，表示查詢成功
var results = JSON.parse(xhr.responseText); // 將后端返回的結果解析為JSON格式
var resultArea = document.getElementById("resultArea"); // 獲取結果顯示區域的元素
// 清空結果顯示區域
resultArea.innerHTML = "";
// 遍歷查詢結果并將其添加到結果顯示區域中
for (var i = 0; i< results.length; i++) {
var result = results[i];
var resultElement = document.createElement("p");
resultElement.innerHTML = result;
resultArea.appendChild(resultElement);
}
}
};
// 向后端發送查詢請求
xhr.open("GET", "/query?name=" + input);
xhr.send();
}在這段代碼中，我們首先獲取用戶輸入的查詢條件。然后，我們創建了一個Ajax對象，并通過設置“onreadystatechange”事件處理函數來監聽查詢結果。當查詢結果返回后，我們解析后端返回的JSON數據，并將查詢結果顯示在前端頁面上。注意，我們在每次查詢之前都需要清空結果顯示區域，以避免之前查詢結果的影響。
在后端，我們需要實現一個接口來處理模糊查詢請求，并返回查詢結果。下面是一個簡單的Node.js代碼示例：
app.get("/query", function(req, res) {
var name = req.query.name; // 獲取查詢條件
// 根據查詢條件執行模糊查詢，這里假設我們有一個名為“users”的數據庫表
var query = "SELECT * FROM users WHERE name LIKE '%" + name + "%'";
var results = db.query(query);
// 返回查詢結果
res.json(results);
});在這段代碼中，我們首先獲取查詢條件。然后，我們根據查詢條件執行模糊查詢，這里假設我們有一個名為“users”的數據庫表。最后，我們將查詢結果以JSON格式返回給前端。
通過以上的代碼示例，我們可以看到，使用Ajax來實現模糊查詢功能非常簡單。在前端頁面上，我們只需要添加一個輸入框和一個按鈕，并編寫相應的JavaScript代碼來處理查詢操作。在后端，我們只需要監聽查詢請求，并根據查詢條件執行對應的數據庫操作，并將查詢結果返回給前端。這樣，我們就可以實現一個簡單的模糊查詢功能。