Java Web :JDBC CRUD 与前后端交互

在 Java Web 开发的学习路径中，数据库 CRUD 操作 是数据处理的核心基础，前后端 Ajax 交互是实现动态 Web 应用的关键技能。本文将结合实战教学大纲，从零到一拆解 JDBC 增删改查、数据库工具类封装、Servlet 后端处理、前端 Ajax 请求与数据渲染的全流程，手把手带你完成一套可落地的 Web 实战项目，即使是编程新手也能轻松掌握。

前言

本教程专为基础薄弱的学习者设计，全程采用套路化代码 + 实战演练模式，弱化复杂理论，强化动手实践。核心覆盖三大模块：JDBC 基础 CRUD 操作、数据库工具类封装优化、jQuery+Ajax+Servlet 前后端数据交互，最终实现前端页面动态展示数据库数据的完整功能。

第一部分 JDBC 核心实战：数据库增删改查 (CRUD)

JDBC（Java 数据库连接）是 Java 程序操作 MySQL 等关系型数据库的标准接口，是后端开发必备技能。针对学习痛点，我们先夯实最核心的增删改查基础操作，掌握固定代码套路。

一、JDBC 增删改（Delete/Insert/Update）实战

JDBC 的新增、修改、删除操作逻辑高度统一，仅需修改 SQL 语句，代码框架完全复用，这是新手快速上手的核心技巧。

1. 基础前提：数据库准备

我们以student（学生表）为例，表结构包含：id(自增主键)、name(姓名)、sex(性别)、age(年龄)、student_id(学号)、class_id(班级号)。

2. 删除（Delete）操作实现

删除是最基础的单条件操作，通过主键 ID 精准删除数据：

复制代码

public class StudentDelete {
    public static void main(String[] args) {
        Connection conn = null;
        PreparedStatement pstmt = null;
        // 1. 定义SQL语句，?为占位符，防止SQL注入
        String sql = "delete from student where id = ?";
        
        try {
            // 2. 加载数据库驱动（MySQL 8.0+ 可省略）
            Class.forName("com.mysql.cj.jdbc.Driver");
            // 3. 获取数据库连接（必填：地址、账号、密码，必须配置时区和编码）
            conn = DriverManager.getConnection(
                "jdbc:mysql://localhost:3306/sql1?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8",
                "root",
                "你的数据库密码"
            );
            // 4. 创建预编译对象
            pstmt = conn.prepareStatement(sql);
            // 5. 为占位符赋值（第一个?对应id）
            pstmt.setInt(1, 1);
            // 6. 执行更新操作，返回受影响行数
            int rows = pstmt.executeUpdate();
            System.out.println("删除成功，影响行数：" + rows);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 7. 关闭资源（顺序：Statement -> Connection）
            try {
                if(pstmt != null) pstmt.close();
                if(conn != null) conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

核心要点：

删除 SQL 使用where条件限定，避免全表删除；
executeUpdate()专用于增删改操作，返回受影响的行数；
MySQL 8.0 必须配置serverTimezone=Asia/Shanghai，否则连接失败。

3. 新增（Insert）与修改（Update）操作

这两个操作仅修改 SQL 和占位符赋值逻辑，代码框架完全复用：

复制代码

// 新增数据SQL
String insertSql = "insert into student(name,sex,age,student_id,class_id) values(?,?,?,?,?)";
// 修改数据SQL
String updateSql = "update student set name = ? where id = ?";

关键规则：

新增操作不插入自增 ID 字段，由数据库自动生成；
修改操作必须加where条件，否则会更新全表数据；
增删改操作后必须手动关闭资源，防止内存泄漏。

二、JDBC 查询操作与结果集处理

查询操作是开发中最常用的功能，用于从数据库读取数据，核心是结果集 (ResultSet) 遍历。

1. 标准查询流程

复制代码

public class StudentSelect {
    public static void main(String[] args) {
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        String sql = "select * from student";
        
        try {
            // 1. 加载驱动+获取连接（同增删改）
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/sql1?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8","root","123456");
            pstmt = conn.prepareStatement(sql);
            // 2. 执行查询，返回结果集
            rs = pstmt.executeQuery();
            // 3. 遍历结果集（rs.next()：判断是否有下一条数据）
            while (rs.next()) {
                // 根据字段名获取数据
                int id = rs.getInt("id");
                String name = rs.getString("name");
                String sex = rs.getString("sex");
                int age = rs.getInt("age");
                System.out.println("ID："+id+"，姓名："+name+"，性别："+sex+"，年龄："+age);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 关闭资源：ResultSet -> Statement -> Connection
            try {
                if(rs != null) rs.close();
                if(pstmt != null) pstmt.close();
                if(conn != null) conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

核心要点：

查询使用executeQuery()，返回ResultSet结果集对象；
资源关闭顺序严格遵循：结果集 → 预编译对象 → 连接对象；
通过rs.get类型("字段名")获取对应数据，类型与数据库保持一致。

第二部分进阶优化：数据库工具类封装

重复编写连接、关闭资源代码会降低开发效率，因此我们封装通用数据库工具类，实现代码复用，简化开发流程。

一、工具类核心设计

我们封装两个核心工具类：

DBConnection：统一管理数据库连接配置（地址、账号、密码、驱动）；
MySQLUtil：封装增删改查通用方法，无需重复编写连接和关闭逻辑。

DBConnection 配置类

复制代码

public class DBConnection {
    // 仅需修改：数据库名、密码，其余配置固定
    private static final String URL = "jdbc:mysql://localhost:3306/sql1?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8";
    private static final String USER = "root";
    private static final String PASSWORD = "你的数据库密码";
    private static final String DRIVER = "com.mysql.cj.jdbc.Driver";

    // 获取连接
    public static Connection getConn() {
        try {
            Class.forName(DRIVER);
            return DriverManager.getConnection(URL, USER, PASSWORD);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    // 关闭资源
    public static void close(Connection conn, Statement stmt, ResultSet rs) {
        try {
            if (rs != null) rs.close();
            if (stmt != null) stmt.close();
            if (conn != null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

二、Servlet 中使用工具类实现数据查询

在 Web 项目中，后端通过 Servlet 接收前端请求，调用工具类查询数据，并返回 JSON 格式数据：

复制代码

@WebServlet("/studentList")
public class StudentServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 设置响应编码，防止中文乱码
        response.setContentType("application/json;charset=utf-8");
        response.setCharacterEncoding("utf-8");
        
        // 2. 定义SQL和查询字段
        String sql = "select * from student";
        String[] fields = {"id","name","sex","age","student_id","class_id"};
        
        // 3. 调用工具类查询数据，返回集合
        List<Map<String, Object>> dataList = MySQLUtil.showUtil(sql, fields);
        
        // 4. 封装统一响应格式（code=200表示成功）
        Map<String, Object> result = new HashMap<>();
        result.put("code", 200);
        result.put("data", dataList);
        
        // 5. 返回JSON数据给前端
        PrintWriter writer = response.getWriter();
        writer.append(JSON.toJSONString(result));
        writer.flush();
        writer.close();
    }
}

核心优势：

无需手动管理连接和资源，工具类自动处理；
统一响应格式，前端更容易解析数据；
仅需修改 SQL 和字段，即可实现任意表查询。

第三部分前后端交互实战：Ajax+Servlet + 数据渲染

这是 Web 开发的核心环节：前端发送异步请求 → 后端处理数据 → 前端渲染页面，全程无刷新，提升用户体验。

一、前端核心技术：jQuery + Ajax

我们使用 jQuery 封装的$.ajax()方法发送 GET 请求，获取后端 Servlet 返回的数据。

1. 前端页面基础结构

复制代码

<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="UTF-8">
    <title>学生信息列表</title>
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        table{border-collapse: collapse;width: 800px;margin: 20px auto;}
        th,td{border:1px solid #333;padding: 8px;text-align: center;}
    </style>
</head>
<body>
    <table id="studentTable">
        <thead>
            <tr>
                <th>ID</th><th>姓名</th><th>性别</th><th>年龄</th><th>学号</th><th>班级号</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

2. 发送 Ajax 请求获取数据

复制代码

// 页面加载完成后自动请求数据
window.onload = function() {
    getStudentList();
}

// 封装请求方法
function getStudentList() {
    $.ajax({
        // 请求地址：后端Servlet的访问路径
        url: "/studentList",
        // 请求类型
        type: "GET",
        // 预期服务器返回的数据类型
        dataType: "json",
        // 请求成功回调函数
        success: function(res) {
            // 判断请求是否成功
            if(res.code === 200) {
                // 渲染数据到表格
                renderTable(res.data);
            }
        },
        // 请求失败回调
        error: function() {
            alert("数据请求失败！");
        }
    });
}

核心要点：

url必须与后端@WebServlet注解路径一致；
页面加载完成（onload）后自动触发请求，实现数据回显；
区分响应状态码，仅成功时渲染数据。

二、前端动态表格数据渲染

接收后端返回的 JSON 数组，通过 JavaScript 动态拼接 HTML，渲染到表格中：

复制代码

// 表格渲染函数
function renderTable(data) {
    // 获取表格tbody
    let tbody = $("#studentTable tbody");
    // 清空原有数据
    tbody.empty();
    // 遍历后端返回的数组
    for(let i = 0; i < data.length; i++) {
        // 获取单条学生数据
        let student = data[i];
        // 拼接tr和td
        let tr = $("<tr></tr>");
        tr.append("<td>"+student.id+"</td>");
        tr.append("<td>"+student.name+"</td>");
        tr.append("<td>"+student.sex+"</td>");
        tr.append("<td>"+student.age+"</td>");
        tr.append("<td>"+student.student_id+"</td>");
        tr.append("<td>"+student.class_id+"</td>");
        // 将行添加到tbody
        tbody.append(tr);
    }
}

核心逻辑：

清空表格原有内容，避免数据重复渲染；
遍历 JSON 数组，逐行生成表格行；
通过append()方法将动态生成的 HTML 插入页面；
字段名必须与后端返回的字段名完全一致。

第四部分全流程核心要点总结

一、JDBC 开发固定套路

四步核心：加载驱动 → 获取连接 → 执行 SQL → 关闭资源；
增删改用executeUpdate()，查询用executeQuery()；
MySQL 8.0 必配：时区、编码，否则连接失败 / 乱码。

二、前后端交互固定流程

前端：jQuery 获取表单数据 → Ajax 发送请求 → 解析 JSON → 渲染页面；
后端：Servlet 接收请求 → 调用工具类查询数据 → 返回 JSON 响应；
统一规范：参数名一致、编码一致、响应格式一致。

三、新手避坑指南

404 错误：检查 Ajax 的 url、Servlet 的注解路径是否正确；
中文乱码：前后端、数据库、响应头全部设置 UTF-8 编码；
数据库连接失败：检查 IP、端口、数据库名、账号密码、时区配置；
数据不渲染：核对前后端字段名、响应状态码、遍历逻辑。

写在最后

本教程覆盖了Java Web 开发最核心的基础实战内容 ，从数据库底层操作到前端页面渲染，形成了完整的技术闭环。对于初学者来说，无需死记硬背代码，只需掌握套路化开发逻辑：JDBC 固定步骤、工具类复用、前后端交互固定流程，通过反复手写练习，就能快速掌握核心技能。

这套技术栈是 Java Web 开发的入门基石，掌握后可轻松拓展学习 SSM、SpringBoot 等主流框架，是进阶高级开发的必经之路。建议大家动手搭建项目，完整跑通全流程，在实践中真正吃透知识点！

Java Web :JDBC CRUD 与前后端交互

前言

第一部分 JDBC 核心实战：数据库增删改查 (CRUD)

一、JDBC 增删改（Delete/Insert/Update）实战

1. 基础前提：数据库准备

2. 删除（Delete）操作实现

3. 新增（Insert）与修改（Update）操作

二、JDBC 查询操作与结果集处理

1. 标准查询流程

第二部分 进阶优化：数据库工具类封装

一、工具类核心设计

DBConnection 配置类

二、Servlet 中使用工具类实现数据查询

第三部分 前后端交互实战：Ajax+Servlet + 数据渲染

一、前端核心技术：jQuery + Ajax

1. 前端页面基础结构

2. 发送 Ajax 请求获取数据

二、前端动态表格数据渲染

第四部分 全流程核心要点总结

一、JDBC 开发固定套路

二、前后端交互固定流程

三、新手避坑指南

写在最后

第二部分进阶优化：数据库工具类封装

第三部分前后端交互实战：Ajax+Servlet + 数据渲染

第四部分全流程核心要点总结