Java Web :JDBC CRUD 与前后端交互
在 Java Web 开发的学习路径中数据库 CRUD 操作是数据处理的核心基础前后端 Ajax 交互是实现动态 Web 应用的关键技能。本文将结合实战教学大纲从零到一拆解 JDBC 增删改查、数据库工具类封装、Servlet 后端处理、前端 Ajax 请求与数据渲染的全流程手把手带你完成一套可落地的 Web 实战项目即使是编程新手也能轻松掌握。前言本教程专为基础薄弱的学习者设计全程采用套路化代码 实战演练模式弱化复杂理论强化动手实践。核心覆盖三大模块JDBC 基础 CRUD 操作、数据库工具类封装优化、jQueryAjaxServlet 前后端数据交互最终实现前端页面动态展示数据库数据的完整功能。第一部分 JDBC 核心实战数据库增删改查 (CRUD)JDBCJava 数据库连接是 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?serverTimezoneAsia/ShanghaiuseUnicodetruecharacterEncodingutf8, 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 必须配置serverTimezoneAsia/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?serverTimezoneAsia/ShanghaiuseUnicodetruecharacterEncodingutf8,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(IDid姓名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?serverTimezoneAsia/ShanghaiuseUnicodetruecharacterEncodingutf8; 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;charsetutf-8); response.setCharacterEncoding(utf-8); // 2. 定义SQL和查询字段 String sql select * from student; String[] fields {id,name,sex,age,student_id,class_id}; // 3. 调用工具类查询数据返回集合 ListMapString, Object dataList MySQLUtil.showUtil(sql, fields); // 4. 封装统一响应格式code200表示成功 MapString, 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 和字段即可实现任意表查询。第三部分 前后端交互实战AjaxServlet 数据渲染这是 Web 开发的核心环节前端发送异步请求 → 后端处理数据 → 前端渲染页面全程无刷新提升用户体验。一、前端核心技术jQuery Ajax我们使用 jQuery 封装的$.ajax()方法发送 GET 请求获取后端 Servlet 返回的数据。1. 前端页面基础结构!DOCTYPE html html langutf-8 head meta charsetUTF-8 title学生信息列表/title !-- 引入jQuery -- script srchttps://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 idstudentTable thead tr thID/thth姓名/thth性别/thth年龄/thth学号/thth班级号/th /tr /thead tbody/tbody /table /body /html2. 发送 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(tdstudent.id/td); tr.append(tdstudent.name/td); tr.append(tdstudent.sex/td); tr.append(tdstudent.age/td); tr.append(tdstudent.student_id/td); tr.append(tdstudent.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 等主流框架是进阶高级开发的必经之路。建议大家动手搭建项目完整跑通全流程在实践中真正吃透知识点