使用 JavaScript 实现 AJAX 请求

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

AJAX 项目预览

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") subgraph Lab Skills javascript/dom_select -.-> lab-300372{{"`使用 JavaScript 实现 AJAX 请求`"}} javascript/dom_manip -.-> lab-300372{{"`使用 JavaScript 实现 AJAX 请求`"}} javascript/event_handle -.-> lab-300372{{"`使用 JavaScript 实现 AJAX 请求`"}} javascript/http_req -.-> lab-300372{{"`使用 JavaScript 实现 AJAX 请求`"}} end

设置搜索框和搜索按钮

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

  1. 打开位于 /src/main/webapp/ 目录下的 index.jsp 文件。
  2. <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 代码来处理搜索功能。

  1. 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 教程