用 JavaScript 掌握 AJAX 请求

介绍

在这个项目中，你将学习如何使用 JavaScript 实现 AJAX（异步 JavaScript 和 XML）请求，以便从后端服务器获取数据并在网页上显示结果。

👀 预览

AJAX 项目预览

🎯 任务

在这个项目中，你将学习：

如何使用 HTML 在网页上创建搜索框和搜索按钮
如何将事件绑定到搜索按钮并从输入字段中检索搜索文本
如何使用 JavaScript 将带有搜索文本作为参数的 AJAX GET 请求发送到后端服务器
如何解析从服务器返回的 JSON 数据并在网页上显示搜索结果

🏆 成果

完成这个项目后，你将能够：

使用 JavaScript 实现 AJAX（异步 JavaScript 和 XML）请求，从后端服务器获取数据
通过动态创建和追加 HTML 元素在网页上显示搜索结果
以用户友好的方式格式化和显示搜索结果

设置搜索框和搜索按钮

在这一步中，你将学习如何在 index.jsp 页面上创建搜索框和搜索按钮。

打开位于 /src/main/webapp/ 目录下的 index.jsp 文件。
在 <body> 部分添加以下 HTML 代码：

<input type="text" id="searchInput" />
<button id="searchButton" onclick="search()">Search</button>
<div id="searchResults"></div>

这将创建一个 ID 为 searchInput 的文本输入字段和一个 ID 为 searchButton 的按钮。该按钮有一个 onclick 属性，在点击时会调用 search() 函数。3. 保存 index.jsp 文件。

实现搜索功能

在这一步中，你将学习如何添加 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

你可以参考以下运行效果：

搜索功能示例

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

使用 JavaScript 实现 AJAX 请求

介绍

👀 预览

🎯 任务

🏆 成果

设置搜索框和搜索按钮

实现搜索功能

运行

总结