菏泽阿里云代理商：ajax jsp 数据库查询显示例子

luotuoemo • 2024年2月9日 03:17 • 阿里云 • 110 views

以下是一个简单的示例，展示如何使用Ajax通过JSP查询数据库并显示结果：

首先，你需要在JSP页面中设置一个表单，这样用户可以输入查询条件并提交请求。此外，你还需要一个用于显示查询结果的区域。

<form id="queryForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="查询">
</form>

<div id="result"></div>

接下来，在JSP页面中引入jQuery库，并使用以下代码实现Ajax请求和结果显示。

<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // 提交查询表单时触发
        $("#queryForm").submit(function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            var name = $("#name").val(); // 获取查询条件

            // 发送Ajax请求
            $.ajax({
                url: "query.jsp", // 后端处理查询的JSP页面
                type: "POST",
                data: { name: name }, // 将查询条件传递给后端
                dataType: "html", // 接收文本类型结果
                success: function(result) {
                    // 查询结果返回成功时，将结果显示在页面上
                    $("#result").html(result);
                },
                error: function(xhr) {
                    // 发生错误时，显示错误信息
                    console.log("Error: " + xhr.statusText);
                }
            });
        });
    });
</script>

最后，在后端的query.jsp页面中处理查询逻辑并返回结果。

<%@ page import="java.sql.*" %>
<%
    // 获取查询条件
    String name = request.getParameter("name");

    // 数据库连接信息
    String url = "jdbc:mysql://localhost:3306/dbname";
    String username = "username";
    String password = "password";

    Connection conn = null;
    PreparedStatement stmt = null;
    ResultSet rs = null;

    try {
        // 连接数据库
        Class.forName("com.mysql.jdbc.Driver");
        conn = DriverManager.getConnection(url, username, password);

        // 执行查询
        String sql = "SELECT * FROM tableName WHERE name=?";
        stmt = conn.prepareStatement(sql);
        stmt.setString(1, name);
        rs = stmt.executeQuery();

        // 处理查询结果
        while (rs.next()) {
            out.println("姓名：" + rs.getString("name"));
            // 其他字段处理...
            out.println("<br>");
        }
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // 释放资源
        if (rs != null) {
            rs.close();
        }
        if (stmt != null) {
            stmt.close();
        }
        if (conn != null) {
            conn.close();
        }
    }
%>

请注意，上述示例仅为演示目的，并不是一个完整的、可直接运行的代码。你需要根据实际情况进行调整和配置，确保数据库连接和查询逻辑的正确性。

以下是一个通过AJAX和JSP从数据库中查询数据并显示的例子：

JSP页面（index.jsp）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX JSP数据库查询示例</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $("#searchBtn").click(function() {
     var keyword = $("#keyword").val();
     $.ajax({
         url: "search.jsp",
         type: "post",
         data: {keyword: keyword},
         success: function(data) {
             $("#result").html(data);
         }
     });
 });
});
</script>
</head>
<body>
 <h1>输入关键字查询数据：</h1>
 <input type="text" id="keyword" placeholder="关键字">
 <button id="searchBtn">搜索</button>
 <br><br>
 <div id="result"></div>
</body>
</html>

JSP页面（search.jsp）：

<%@ page import="java.sql.*" %>
<%
String keyword = request.getParameter("keyword");
String url = "jdbc:mysql://localhost:3306/your_database_name";
String username = "your_username";
String password = "your_password";

try {
 Class.forName("com.mysql.jdbc.Driver");
 Connection conn = DriverManager.getConnection(url, username, password);
 Statement stmt = conn.createStatement();
 String query = "SELECT * FROM your_table_name WHERE column_name LIKE '%" + keyword + "%'";
 ResultSet rs = stmt.executeQuery(query);
 
 while (rs.next()) {
     out.println("ID: " + rs.getInt("id") + "<br>");
     out.println("Name: " + rs.getString("name") + "<br>");
     // 继续输出其他字段...
     out.println("<br>");
 }
 
 rs.close();
 stmt.close();
 conn.close();
} catch (Exception e) {
 e.printStackTrace();
}
%>

上述例子中，首先在index.jsp页面中定义了一个输入框和一个搜索按钮，当用户点击搜索按钮时，通过AJAX将用户输入的关键字发送到search.jsp页面进行处理。在search.jsp页面中，首先获取到用户输入的关键字，然后连接数据库并执行查询操作，将查询结果以HTML格式输出。最后，在index.jsp页面的回调函数中，将查询结果显示在页面的result元素中。

请根据你的实际需求修改JDBC连接信息（数据库URL、用户名和密码）、要查询的表名和列名，以及输出内容的格式。

发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/141483.html