Java 编程 用AJAX 从数据库获取数据读取到页面

以下是使用 Java 和 AJAX 从数据库获取数据并将其读取到页面的基本步骤：

编写服务器端代码

创建一个 Java Servlet，用于处理 AJAX 请求并从数据库中获取数据。根据需要，您可以使用 JDBC 或其他框架（如 Hibernate 或 MyBatis）与数据库进行交互。一旦您获得了数据，您可以将其存储在一个 Java 对象中并将其转换为 JSON 格式，以便将其发送回客户端。

以下是示例 Servlet 代码，用于从数据库中获取用户信息并将其作为 JSON 发送回客户端：

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

public class UserServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<User> userList = new ArrayList<>();

        // Connect to database using JDBC
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password");
            PreparedStatement stmt = conn.prepareStatement("SELECT * FROM users");
            ResultSet rs = stmt.executeQuery();

            // Convert result set to list of User objects
            while (rs.next()) {
                User user = new User();
                user.setId(rs.getInt("id"));
                user.setName(rs.getString("name"));
                user.setEmail(rs.getString("email"));
                userList.add(user);
            }

            rs.close();
            stmt.close();
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

        // Convert list of User objects to JSON
        String json = new Gson().toJson(userList);

        // Send JSON back to client
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json);
    }
}

编写客户端代码

创建一个 HTML 页面，并使用 AJAX 发送请求到服务器端并将响应读取到页面。您可以使用 jQuery 或其他 JavaScript 框架来简化 AJAX 调用。在响应到达时，您可以将 JSON 数据解析为 JavaScript 对象，并使用它来更新页面中的内容。

以下是示例 HTML 和 JavaScript 代码，用于从服务器端获取用户信息并将其显示在页面上：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>User List</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: "UserServlet",
                type: "GET",
                dataType: "json",
                success: function(data) {
                    var userList = $("#userList");
                    for (var i = 0; i < data.length; i++) {
                        var user = data[i];
                        userList.append("<li>" + user.name + " (" + user.email + ")</li>");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("AJAX error: " + textStatus + " - " + errorThrown);
                }
            });
        });
    </script>
</head>
<body>
    <h1>User List</h1>
    <ul id="userList"></ul>
</body>
</html>

在上面的代码中，我们使用 jQuery 的 AJAX 函数来发送 GET 请求到 UserServlet。当响应通过 success 回调函数返回时，我们将遍历返回的 JSON 数据并将其显示在页面上的无序列表中。如果发生错误，我们将在控制台上记录错误消息

Java 编程 用AJAX 从数据库获取数据读取到页面

Java 编程用AJAX 从数据库获取数据读取到页面