实现搜索功能
在这一步中,你将学习如何添加 JavaScript 代码来处理搜索功能。
在 index.jsp
文件的 <head>
部分添加以下 JavaScript 代码:
<script>
function search() {
var searchText = document.getElementById("searchInput").value;
console.log("Search Text:", searchText); // 输出搜索文本到控制台
var xhr = new XMLHttpRequest();
xhr.open("GET", "/UserServlet?username=" + searchText, true); // 发送 GET 请求并将用户名作为参数追加到 URL
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
displayResults(response);
}
};
xhr.send();
}
function displayResults(results) {
var searchResultsDiv = document.getElementById("searchResults");
searchResultsDiv.innerHTML = "<p>Search Results:</p>";
// 检查 results 是否为数组
if (Array.isArray(results)) {
// 遍历结果数组中的每个用户对象
results.forEach(function (user) {
// 创建一个新的 div 元素用于显示用户信息
var userDiv = document.createElement("div");
userDiv.className = "user-info"; // 添加一个类用于样式设置
// 将用户信息添加到新的 div 元素中
userDiv.innerHTML = `
<p>User ID: ${user.userId}</p>
<p>User Name: ${user.userName}</p>
<p>User Gender: ${user.userGender === 1? "Male" : "Female"}</p>
<p>User Age: ${user.userAge}</p>
<p>User Nation: ${user.userNation}</p>
<p>User Email: ${user.userEmail}</p>
<p>User Phone: ${user.userPhone}</p>
<p>User Address: ${user.userAddr}</p>
`;
// 将新的 div 元素追加到搜索结果 div 中
searchResultsDiv.appendChild(userDiv);
});
} else {
// 如果 results 不是数组,显示相应消息
searchResultsDiv.innerHTML = "<p>No results found</p>";
}
}
</script>
这段 JavaScript 代码处理搜索功能。当用户点击“搜索”按钮时,会调用 search()
函数,该函数会将带有搜索文本作为参数的 AJAX 请求发送到 /UserServlet
。然后,使用 displayResults()
函数解析服务器的响应并显示在 searchResults
div 中。2. 保存 index.jsp
文件。
现在,你已经使用 JavaScript 完成了 AJAX 请求的实现。你可以运行项目并测试搜索功能。
运行
最后,你可以在终端中使用以下命令编译并运行代码:
cd ServletAjaxProject
mvn tomcat7:run
你可以参考以下运行效果: