Java 代码编写 AJAX从数据库读取数据到页面

以下是一个基于Java和AJAX的示例代码，从数据库中读取数据并在页面中显示：

Java代码

首先需要建立一个Java类，用于连接数据库并执行查询操作。

import java.sql.*;

public class DatabaseConnection {
    
    private Connection connection;
    
    public DatabaseConnection() {
        try {
            Class.forName("com.mysql.jdbc.Driver");
            connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "root", "");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    public String getTableData() {
        String result = "";
        try {
            Statement statement = connection.createStatement();
            ResultSet resultSet = statement.executeQuery("SELECT * FROM mytable");
            while (resultSet.next()) {
                result += "<tr><td>" + resultSet.getString("id") + "</td><td>" + resultSet.getString("name") + "</td></tr>";
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return result;
    }
    
}

这个类中，我们首先通过JDBC驱动程序建立了一个与MySQL数据库的连接，并在构造函数中执行了这一操作。

然后我们定义了一个getTableData方法，用来执行查询操作并返回查询结果。在这个方法中，我们首先创建一个Statement对象并执行了一个SELECT语句，然后遍历结果集并将结果拼接到一个字符串中。

JSP代码

在JSP页面中，我们需要使用AJAX来获取这个Java类中的数据，并将数据显示在页面中。

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script type="text/javascript">
        function loadTable() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("tableBody").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "getTableData.jsp", true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <button onclick="loadTable()">Load Table</button>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>
</body>
</html>

这个页面中，我们定义了一个loadTable函数，用于向服务器发送AJAX请求并更新页面中的表格数据。在函数中，我们创建了一个XMLHttpRequest对象，并定义了一个回调函数来处理响应数据。然后我们使用open方法打开了一个GET请求，并将结果发送到getTableData.jsp页面。在响应成功后，我们将响应数据赋值给页面中的表格元素。

JSP页面

最后，我们需要创建一个JSP页面，用于调用Java类中的getTableData方法并返回数据。

<%@ page import="DatabaseConnection" %>
<%
    DatabaseConnection db = new DatabaseConnection();
    out.print(db.getTableData());
%>

这个页面中，我们首先导入了之前创建的Java类。然后我们创建了一个DatabaseConnection对象，并调用了其中的getTableData方法。最后，我们将返回的数据打印到页面中。

完整代码如下：

Java代码

import java.sql.*;

public class DatabaseConnection {
    
    private Connection connection;
    
    public DatabaseConnection() {
        try {
            Class.forName("com.mysql.jdbc.Driver");
            connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "root", "");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    public String getTableData() {
        String result = "";
        try {
            Statement statement = connection.createStatement();
            ResultSet resultSet = statement.executeQuery("SELECT * FROM mytable");
            while (resultSet.next()) {
                result += "<tr><td>" + resultSet.getString("id") + "</td><td>" + resultSet.getString("name") + "</td></tr>";
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return result;
    }
    
}

JSP代码

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
    <script type="text/javascript">
        function loadTable() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("tableBody").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "getTableData.jsp", true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <button onclick="loadTable()">Load Table</button>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>
</body>
</html>

JSP页面

<%@ page import="DatabaseConnection" %>
<%
    DatabaseConnection db = new DatabaseConnection();
    out.print(db.getTableData());
%>
``