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());
%>