当前位置： 首页 > news >正文

Java Web :JDBC CRUD 与前后端交互

news 2026/5/12 23:47:12

在 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类型("字段名")获取对应数据，类型与数据库保持一致。

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

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

一、工具类核心设计

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

  1. DBConnection：统一管理数据库连接配置（地址、账号、密码、驱动）；
  2. 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); } }

核心逻辑：

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

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

一、JDBC 开发固定套路

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

二、前后端交互固定流程

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

三、新手避坑指南

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

写在最后

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

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

http://www.jsqmd.com/news/805270/

相关文章：

  • 破解‘特质波动率之谜’？从Ang的论文到Python复现，一份给金融科技爱好者的实战指南
  • 一文读懂Grok 4发布会：四大天王轮流发版，2026全球AI第一梯队争夺战
  • 手把手教你用Arduino驱动SPL06-007气压传感器（附完整代码与PCB布局避坑指南）
  • Linux环境下Minio部署实战：从零搭建到服务稳定运行
  • 基于AI Agent的智能邮件分诊系统：从原理到开源实践
  • DeepSeek垂直搜索部署避雷手册（含Docker镜像精简方案与GPU显存压缩技巧）：仅剩最后237份内部技术白皮书
  • YOLOv5 v6.0架构解析：从Backbone到Head的模块化设计精讲
  • 智能变频恒压供水系统解决方案：节水降耗，推进绿色低碳水务发展
  • 被高价限流逼到半夜改价的夜晚，我用凌风工具箱十分钟批量搞定
  • 这难道是人能够想象出来的赛道吗？
  • 从APB2到APB4：一次读写操作背后，AMBA总线这20年都升级了啥？
  • Taotoken的API Key精细化管理功能助力企业实现访问控制与审计
  • js的复习（一）
  • Qt实战：手把手教你实现QTableView单元格拖拽交换（附完整代码）
  • 大数据没那么远：把散乱数据理顺，让业务敢用
  • 不只是Lab 0：从xv6环境搭建看RISC-V工具链与QEMU模拟器的前世今生
  • Veo与Sora 2视频生成质量深度横评：基于PSNR/SSIM/LPIPS/VMAF 5大专业指标的72小时盲测结果揭晓
  • OpenClaw Telegram机器人自愈系统：从诊断到恢复的自动化运维实践
  • 智能家居AI化：从边缘计算到主动决策
  • 智能APK安装器：在Windows电脑上直接运行Android应用的完整指南
  • EKF神经网络修正储能电站SOC估计【附代码】
  • 第四部分：持久化与防御规避
  • 3个关键步骤：用CoverM轻松完成PacBio HiFi宏基因组覆盖率分析
  • 终极开源镜像烧录解决方案：Etcher让你的设备部署变得如此简单
  • v7人像细节崩坏？皮肤纹理失真？面部比例错乱？——Midjourney官方未公开的3类prompt结构陷阱与实时修复方案
  • 别再乱加allow了！Android SELinux权限配置避坑指南（附audit2allow实战）
  • DataGrip实战：从零到一掌握数据库Schema的创建、关联与清理
  • 零基础学用语音转文字服务避坑指南，包教包会
  • 移动端适配完全指南：响应式布局与适配方案
  • 5分钟掌握Word文档转换神器：Mammoth.js让办公文档处理智能化