Servlet+Ajax实现对数据的列表展示（极简入门）

这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。

以下是一个简单的示例，展示了如何使用Servlet处理Ajax请求并返回数据，以及如何在前端使用Ajax显示这些数据。

后端代码 (Servlet):




import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/data-list")
public class DataListServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        // 模拟数据
        String[] data = {"Item 1", "Item 2", "Item 3"};
        // 将数据转换为JSON格式
        out.print("[" + String.join(",", data) + "]");
        out.flush();
    }
}

前端代码 (HTML + JavaScript):




<!DOCTYPE html>
<html>
<head>
    <title>Data List</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = JSON.parse(xhr.responseText);
                    showData(data);
                }
            };
            xhr.open("GET", "/data-list", true);
            xhr.send();
        }
 
        function showData(data) {
            var list = document.getElementById("data-list");
            data.forEach(function(item) {
                var li = document.createElement("li");
                li.textContent = item;
                list.appendChild(li);
            });
        }
    </script>
</head>
<body onload="fetchData()">
    <h1>Data List</h1>
    <ul id="data-list"></ul>
</body>
</html>

在这个例子中，Servlet响应Ajax请求并返回一个JSON格式的数据列表。前端JavaScript通过Ajax请求这个数据，并将其插入到页面的列表中。这个例子展示了如何使用Servlet作为后端服务来处理Ajax请求和响应数据。

Servlet+Ajax实现对数据的列表展示（极简入门）

评论已关闭

推荐阅读