Servlet+JQuery实现数据库数据渲染到前端页面

XS0301062026-05-11 9:52

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的连接，是所有数据库操作的基础。

java 复制代码 
package com.qcby.sql;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBConnection {
    // 数据库连接参数（需根据自己的数据库配置修改）
    String driver = "com.mysql.jdbc.Driver"; // MySQL驱动
    String url = "jdbc:mysql://localhost:3306/may7?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC&useSSL=false";
    String user = "root"; // 数据库用户名
    String password = "123456"; // 数据库密码
    public Connection conn;

    // 构造方法：初始化时建立连接
    public DBConnection() {
        try {
            Class.forName(driver); // 加载驱动
            conn = DriverManager.getConnection(url, user, password); // 建立连接
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    // 关闭连接：避免资源泄漏
    public void close() {
        try {
            this.conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

笔记要点：

  • 驱动包：需确保项目中引入MySQL驱动（如mysql-connector-java.jar），否则会报"找不到驱动类"错误；
  • URL参数：useUnicode=true&characterEncoding=utf-8解决中文乱码，serverTimezone=UTC解决时区问题；
  • 连接关闭：所有数据库操作完成后必须关闭连接，否则会占用数据库资源。

2. 第二步：数据库工具类封装（MysqlUtil.java）

封装增删改查（CRUD）、结果集转JSON的方法，避免重复代码，核心是getJsonBySql方法（将查询结果转为前端可解析的JSON格式）。

核心方法：getJsonBySql（查询并转JSON）
java 复制代码 
public static String getJsonBySql(String sql,String[] colums){
    System.err.println("执行SQL:" + sql);
    ArrayList<String[]>  result = new ArrayList<String[]>();
    DBConnection db = new DBConnection();
    try {
        Statement stmt = db.conn.createStatement();
        ResultSet rs = stmt.executeQuery(sql);
        // 遍历结果集，封装成字符串数组
        while(rs.next()){
            String[] dataRow = new String[colums.length];
            for( int i = 0; i < dataRow.length; i++ ) {
                dataRow[i] = rs.getString( colums[i] );
            }
            result.add(dataRow);
        }
        rs.close();
        db.close();
    } catch (SQLException e) {
        e.printStackTrace();
    }
    // 调用工具方法，将结果集转为JSON字符串
    return listToJson(result,colums);
}

// 结果集转JSON核心逻辑
public static String listToJson( ArrayList<String[]> list,String[] colums) {
    String jsonStr = "{\"code\":0,\"msg\":\"success\",\"data\":[";
    for(int i = 0; i < list.size(); i++) {
        String arr = "{";
        for( int j = 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 += "]}";
    return jsonStr;
}

笔记要点：

  • 封装思想：将数据库操作、JSON转换抽成工具方法，后续新增表的查询只需调用方法，无需重复写JDBC代码；
  • JSON格式：返回的JSON包含code（状态码）、msg（提示信息）、data（数据列表），符合前端AJAX解析的通用格式；
  • 空值处理：对NULL值做空字符串替换，避免前端解析出错。

3. 第三步：Servlet层（处理前端请求）

每个数据表对应一个Servlet（如ShowClassServlet/ShowStudentServlet），负责接收前端请求、执行查询、返回JSON数据。

以ShowClassServlet.java为例：

java 复制代码 
package com.qcby.servlet;

import com.qcby.sql.MysqlUtil;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

// 注解配置Servlet访问路径
@WebServlet("/showClassServlet")
public class ShowClassServlet  extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 定义查询SQL和字段数组
        String sql = "select * from class";
        String[] columns = {"id", "class_num", "class_name"};
        // 2. 调用工具类获取JSON数据
        String data = 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为例（修正原代码的小问题）：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级数据展示</title>
    <!-- 引入JQuery库 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<!-- 页面加载完成后执行get()方法 -->
<body onload="get()">
    <div id="test">数据展示</div>
</body>
<script>
    // 1. 发送AJAX请求获取数据
    function get(){
        $.ajax({
            url:"/0203ServletTest/showClassServlet", // Servlet访问路径（注意项目名）
            type:"get", // 请求方式与Servlet的doGet对应
            dataType:"json", // 预期返回JSON格式
            success:function(res){ // 请求成功回调
                show(res.data); // 调用渲染方法
            }
        });
    }

    // 2. 渲染数据到表格
    function show(data){
        var html="<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(var i=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()。

三、常见问题&解决方案

  1. 中文乱码

    • 原因：数据库、Servlet响应、前端页面编码不统一；
    • 解决：
      • 数据库连接URL加characterEncoding=utf-8；
      • Servlet中设置resp.setCharacterEncoding("UTF-8")和resp.setContentType("application/json;charset=UTF-8")；
      • 前端页面<meta charset="UTF-8">。

  2. AJAX报404错误

    • 原因：Servlet访问路径写错、项目部署名错误、Servlet未加@WebServlet注解；
    • 解决：核对@WebServlet的路径与AJAX的url，确保项目名一致。

  3. JSON解析失败

    • 原因：SQL查询结果为空、工具类转JSON时格式错误、数据中有特殊字符；
    • 解决：
      • 调试SQL确保有结果；
      • 工具类中对特殊字符（如双引号）做转义（replace("\"","\\\"")）；
      • 空值替换为空字符串。

  4. 数据库连接失败

    • 原因：驱动类未加载、数据库账号密码错误、数据库未启动；
    • 解决：检查驱动包、核对账号密码、确保MySQL服务运行。

四、整体流程总结

整个数据渲染流程可以概括为：

复制代码 
前端页面加载 → 执行AJAX GET请求 → Servlet接收请求 → 
调用MysqlUtil执行SQL查询 → DBConnection建立数据库连接 → 
查询结果转JSON → Servlet返回JSON数据 → 前端解析JSON并拼接表格 → 渲染到页面

五、学习小结

这个案例是Web前后端交互的入门核心，重点掌握：

  1. JDBC的数据库连接与资源关闭；
  2. 工具类封装的思想（减少重复代码）；
  3. Servlet处理请求、返回JSON的规范；
  4. JQuery AJAX异步请求与数据渲染；
  5. 编码统一、路径配置等细节（避坑关键）。

后续可以在此基础上扩展：新增分页查询、条件查询、前后端异常处理等功能，进一步巩固Web开发基础～

相关推荐
van久1 小时前
Day27：菜单管理 + 动态路由（前端可直接用！）
前端·状态模式
Xxtaoaooo1 小时前
DolphinDB工业物联网实时分析：从海量数据困局到毫秒级预警的技术突围
物联网·struts·servlet·工业物联网·dolphindb
恋猫de小郭1 小时前
DeepSeek V4 Flash 可以在 128GB 的 M3 Max 运行，还是 1M 上下文
前端·人工智能·ai编程
van久1 小时前
企业级后台管理系统（结合前 4 周全部内容）详细需求文档 + 前端模板适配
前端
Lsx_2 小时前
H5 嵌入微信 / 支付宝 / 抖音小程序 WebView：调用原生能力完整方案
前端·微信小程序·webview
Cobyte2 小时前
大模型 MCP 本质原理：从协议到代码实现
前端·aigc·ai编程
cong_2 小时前
狐蒂云🦊跑路我的摸鱼岛没了！
前端·后端·github
kyriewen112 小时前
我开发的 Chrome 扒图浏览器插件又更新了❗
前端·javascript·chrome·科技·ai
Data_Journal2 小时前
Puppeteer指纹识别指南：循序渐进，简单易学！
服务器·前端·人工智能·物联网·媒体
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03零基础教你claude code 接入 deepseek V404【AI】2026 年具身智能模型和世界模型总结05CC-Switch & Claude 基于 Linux 服务器安装使用指南06要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法07Windows端Codex接入第三方模型（DeekSeek，BaiLian)08Dirtyfrag漏洞：我花了一下午搞清楚这个Linux内核提权漏洞到底在搞什么092026年AI前瞻：量子AI、具身智能与科学发现的新纪元10裂开！ChatGPT 居然开始要手机号验证，附详细解决方法