Servlet+JQuery实现数据库数据渲染到前端页面
Servlet+JQuery实现数据库数据渲染到前端页面 | 学习笔记
今天跟着课程学习了「从MySQL数据库取数据，通过Servlet处理后渲染到前端页面」的完整流程，这是Web开发中前后端数据交互的基础案例，整理核心知识点和代码细节，方便后续回顾～
一、案例背景&技术栈
1. 实现目标
从MySQL数据库的class/student/course/relationship等表中查询数据，通过Java Servlet处理请求，前端使用JQuery的AJAX异步获取数据，最终以表格形式展示在页面上。
2. 核心技术栈
- 后端：Java Servlet（处理HTTP请求）、JDBC（数据库连接）、MySQL（数据存储）
- 前端：HTML（页面结构）、JQuery（AJAX异步请求）、JSON（前后端数据交换格式）
二、核心代码分层拆解
整个案例遵循「数据库连接层 → 工具类封装 → Servlet业务层 → 前端渲染层」的分层思路，结构清晰，复用性强。
1. 第一步：数据库连接（DBConnection.java）
负责建立Java程序与MySQL的连接，是所有数据库操作的基础。
packagecom.qcby.sql;importjava.sql.Connection;importjava.sql.DriverManager;publicclassDBConnection{// 数据库连接参数（需根据自己的数据库配置修改）Stringdriver="com.mysql.jdbc.Driver";// MySQL驱动Stringurl="jdbc:mysql://localhost:3306/may7?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC&useSSL=false";Stringuser="root";// 数据库用户名Stringpassword="123456";// 数据库密码publicConnectionconn;// 构造方法：初始化时建立连接publicDBConnection(){try{Class.forName(driver);// 加载驱动conn=DriverManager.getConnection(url,user,password);// 建立连接}catch(Exceptione){e.printStackTrace();}}// 关闭连接：避免资源泄漏publicvoidclose(){try{this.conn.close();}catch(Exceptione){e.printStackTrace();}}}笔记要点：
- 驱动包：需确保项目中引入MySQL驱动（如mysql-connector-java.jar），否则会报“找不到驱动类”错误；
- URL参数：
useUnicode=true&characterEncoding=utf-8解决中文乱码，serverTimezone=UTC解决时区问题； - 连接关闭：所有数据库操作完成后必须关闭连接，否则会占用数据库资源。
2. 第二步：数据库工具类封装（MysqlUtil.java）
封装增删改查（CRUD）、结果集转JSON的方法，避免重复代码，核心是getJsonBySql方法（将查询结果转为前端可解析的JSON格式）。
核心方法：getJsonBySql（查询并转JSON）
publicstaticStringgetJsonBySql(Stringsql,String[]colums){System.err.println("执行SQL:"+sql);ArrayList<String[]>result=newArrayList<String[]>();DBConnectiondb=newDBConnection();try{Statementstmt=db.conn.createStatement();ResultSetrs=stmt.executeQuery(sql);// 遍历结果集，封装成字符串数组while(rs.next()){String[]dataRow=newString[colums.length];for(inti=0;i<dataRow.length;i++){dataRow[i]=rs.getString(colums[i]);}result.add(dataRow);}rs.close();db.close();}catch(SQLExceptione){e.printStackTrace();}// 调用工具方法，将结果集转为JSON字符串returnlistToJson(result,colums);}// 结果集转JSON核心逻辑publicstaticStringlistToJson(ArrayList<String[]>list,String[]colums){StringjsonStr="{\"code\":0,\"msg\":\"success\",\"data\":[";for(inti=0;i<list.size();i++){Stringarr="{";for(intj=0;j<list.get(0).length;j++){if(list.get(i)[j]==null||"NULL".equals(list.get(i)[j])){arr+="\""+colums[j]+"\":\"\"";}else{arr+="\""+colums[j]+"\":"+"\""+list.get(i)[j].replace("\"","\\\"")+"\"";}if(j<list.get(0).length-1){arr+=",";}}arr+="}";if(i<list.size()-1){arr+=",";}jsonStr+=arr;}jsonStr+="]}";returnjsonStr;}笔记要点：
- 封装思想：将数据库操作、JSON转换抽成工具方法，后续新增表的查询只需调用方法，无需重复写JDBC代码；
- JSON格式：返回的JSON包含
code（状态码）、msg（提示信息）、data（数据列表），符合前端AJAX解析的通用格式； - 空值处理：对NULL值做空字符串替换，避免前端解析出错。
3. 第三步：Servlet层（处理前端请求）
每个数据表对应一个Servlet（如ShowClassServlet/ShowStudentServlet），负责接收前端请求、执行查询、返回JSON数据。
以ShowClassServlet.java为例：
packagecom.qcby.servlet;importcom.qcby.sql.MysqlUtil;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;// 注解配置Servlet访问路径@WebServlet("/showClassServlet")publicclassShowClassServletextendsHttpServlet{@OverrideprotectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{// 1. 定义查询SQL和字段数组Stringsql="select * from class";String[]columns={"id","class_num","class_name"};// 2. 调用工具类获取JSON数据Stringdata=MysqlUtil.getJsonBySql(sql,columns);// 3. 设置响应编码（解决中文乱码）resp.setCharacterEncoding("UTF-8");resp.setContentType("application/json;charset=UTF-8");// 4. 返回JSON数据给前端resp.getWriter().append(data);}}笔记要点：
- 注解配置：
@WebServlet("/showClassServlet")替代web.xml配置，简化开发； - 请求方式：案例中用
doGet处理GET请求，前端AJAX对应type:"get"； - 响应配置：必须设置
CharacterEncoding和ContentType，否则前端接收的JSON会中文乱码。
4. 第四步：前端页面（AJAX请求+表格渲染）
前端使用JQuery的AJAX异步请求Servlet接口，获取JSON数据后拼接HTML表格，渲染到页面。
以class.html为例（修正原代码的小问题）：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>班级数据展示</title><!-- 引入JQuery库 --><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><!-- 页面加载完成后执行get()方法 --><bodyonload="get()"><divid="test">数据展示</div></body><script>// 1. 发送AJAX请求获取数据functionget(){$.ajax({url:"/0203ServletTest/showClassServlet",// Servlet访问路径（注意项目名）type:"get",// 请求方式与Servlet的doGet对应dataType:"json",// 预期返回JSON格式success:function(res){// 请求成功回调show(res.data);// 调用渲染方法}});}// 2. 渲染数据到表格functionshow(data){varhtml="<table border='1px'>";// 表头html+="<tr>";// 修正：原代码用<td>包裹表头，应该用<tr>+<th>html+="<th>id</th>";html+="<th>class_num</th>";html+="<th>class_name</th>";html+="</tr>";// 遍历数据拼表格行for(vari=0;i<data.length;i++){html+="<tr>";html+="<td>"+data[i].id+"</td>";html+="<td>"+data[i].class_num+"</td>";html+="<td>"+data[i].class_name+"</td>";html+="</tr>";// 修正：原代码重复写<tr>，改为闭合</tr>}html+="</table>";// 清空容器并渲染表格$("#test").empty().append(html);}</script></html>笔记要点：
- AJAX路径：
url中的/0203ServletTest是项目部署名，需与实际项目名一致，否则会报404； - 表格拼接：原代码存在
<tr>未闭合、表头用<td>的问题，修正后语义更规范； - 异步请求：
dataType:"json"告诉JQuery自动将返回的字符串解析为JSON对象，无需手动JSON.parse()。
三、常见问题&解决方案
中文乱码
- 原因：数据库、Servlet响应、前端页面编码不统一；
- 解决：
- 数据库连接URL加
characterEncoding=utf-8； - Servlet中设置
resp.setCharacterEncoding("UTF-8")和resp.setContentType("application/json;charset=UTF-8")； - 前端页面
<meta charset="UTF-8">。
- 数据库连接URL加
AJAX报404错误
- 原因：Servlet访问路径写错、项目部署名错误、Servlet未加
@WebServlet注解； - 解决：核对
@WebServlet的路径与AJAX的url，确保项目名一致。
- 原因：Servlet访问路径写错、项目部署名错误、Servlet未加
JSON解析失败
- 原因：SQL查询结果为空、工具类转JSON时格式错误、数据中有特殊字符；
- 解决：
- 调试SQL确保有结果；
- 工具类中对特殊字符（如双引号）做转义（
replace("\"","\\\"")）； - 空值替换为空字符串。
数据库连接失败
- 原因：驱动类未加载、数据库账号密码错误、数据库未启动；
- 解决：检查驱动包、核对账号密码、确保MySQL服务运行。
四、整体流程总结
整个数据渲染流程可以概括为：
前端页面加载 → 执行AJAX GET请求 → Servlet接收请求 → 调用MysqlUtil执行SQL查询 → DBConnection建立数据库连接 → 查询结果转JSON → Servlet返回JSON数据 → 前端解析JSON并拼接表格 → 渲染到页面五、学习小结
这个案例是Web前后端交互的入门核心，重点掌握：
- JDBC的数据库连接与资源关闭；
- 工具类封装的思想（减少重复代码）；
- Servlet处理请求、返回JSON的规范；
- JQuery AJAX异步请求与数据渲染；
- 编码统一、路径配置等细节（避坑关键）。
后续可以在此基础上扩展：新增分页查询、条件查询、前后端异常处理等功能，进一步巩固Web开发基础～