JSP + JQuery作为MVC的前端

作者： 分类：所有,jquery 字数：12151

'# JSP + JQuery作为MVC的前端

一、背景与问题

在Web开发的历史长河中，JSP（JavaServer Pages）和JQuery曾是构建动态网页的黄金组合。JSP作为服务器端技术，通过Java代码生成HTML；JQuery作为客户端库，简化了DOM操作和AJAX通信。这种组合在传统企业级应用中曾占据主导地位，其MVC架构特点值得深入研究。

当前，随着前端框架（如React、Vue）的普及，JSP+JQuery的组合已逐渐边缘化。但在某些遗留系统改造、特定业务场景或对服务器端渲染有特殊需求的项目中，这种技术栈仍具有现实意义。本文将深入剖析其技术原理，分析实际应用场景，并探讨性能优化和安全风险。

二、基本原理

1. MVC架构的分层

JSP+JQuery的MVC架构分为三层：

  • Model：数据模型，由JavaBean或EJB实现，封装业务逻辑和数据
  • View：JSP页面，负责展示数据和用户交互
  • Controller：Servlet或JSP的Action，处理用户请求并协调Model/View

2. JSP的特性

JSP本质是Servlet的扩展，通过以下机制实现动态内容：

  • <% %> 脚本标签嵌入Java代码
  • <%= %> 表达式输出变量
  • <%-- --%> 注释
  • JSP标签库（Tag Library）支持组件化开发

3. JQuery的特性

JQuery通过封装DOM操作和AJAX通信，简化了前端开发：

  • 选择器系统（$("#id")）
  • 事件处理（.on()）
  • AJAX通信（.ajax()）
  • 动态DOM操作（.append() / .remove()）

三、环境准备

1. 开发环境

  • JDK 1.8+
  • Tomcat 9.x
  • IDE：IntelliJ IDEA 或 Eclipse
  • Maven 3.x

2. 依赖配置

<!-- pom.xml -->
<dependencies>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.6.0</version>
    </dependency>
</dependencies>

四、核心实现

1. 服务器端MVC实现

Servlet控制器示例：

@WebServlet("/user/*")
public class UserController extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getPathInfo();
        
        switch (action) {
            case "/list":
                List<User> users = UserService.findAll();
                request.setAttribute("users", users);
                request.getRequestDispatcher("/user/list.jsp").forward(request, response);
                break;
            case "/edit":
                String id = request.getParameter("id");
                User user = UserService.findById(id);
                request.setAttribute("user", user);
                request.getRequestDispatcher("/user/edit.jsp").forward(request, response);
                break;
            default:
                response.sendError(HttpServletResponse.SC_NOT_FOUND);
        }
    }
}

JSP视图示例：

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>User List</title>
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h1>User List</h1>
    <table border="1">
        <thead><tr><th>ID</th><th>Name</th><th>Actions</th></tr></thead>
        <tbody>
            <c:forEach items="${users}" var="user">
                <tr>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>
                        <button class="edit-btn" data-id="${user.id}">Edit</button>
                        <button class="delete-btn" data-id="${user.id}">Delete</button>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $('.edit-btn').on('click', function() {
                let id = $(this).data('id');
                $.get('/user/edit', { id: id }, function(data) {
                    $('#content').html(data);
                });
            });

            $('.delete-btn').on('click', function() {
                let id = $(this).data('id');
                if (confirm('Are you sure?')) {
                    $.post('/user/delete', { id: id }, function(result) {
                        if (result.success) {
                            location.reload();
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

2. 前端MVC实现

JQuery事件驱动模型：

// 全局事件处理
$(document).on('click', '.edit-btn', function() {
    let id = $(this).data('id');
    $.ajax({
        url: '/user/edit',
        method: 'GET',
        data: { id: id },
        success: function(data) {
            $('#content').html(data);
        }
    });
});

// 表单提交处理
$('#userForm').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: '/user/save',
        method: 'POST',
        data: $(this).serialize(),
        success: function(response) {
            alert('Saved successfully');
            location.reload();
        }
    });
});

五、完整案例

1. 用户管理系统案例

项目结构：

src
├── main
│   ├── java
│   │   └── com.example
│   │       └── controller
│   │           └── UserController.java
│   │       └── service
│   │           └── UserService.java
│   │       └── model
│   │           └── User.java
│   └── webapp
│       ├── WEB-INF
│       │   └── web.xml
│       └── user
│           ├── list.jsp
│           ├── edit.jsp
│           └── index.jsp

核心代码：

User.java

public class User {
    private String id;
    private String name;
    private String email;
    
    // Getters and Setters
}

UserService.java

public class UserService {
    public static List<User> findAll() {
        // 模拟数据
        List<User> users = new ArrayList<>();
        users.add(new User("1", "Alice", "alice@example.com"));
        users.add(new User("2", "Bob", "bob@example.com"));
        return users;
    }

    public static User findById(String id) {
        // 模拟查找
        return new User(id, "John", "john@example.com");
    }
}

UserController.java

@WebServlet("/user/*")
public class UserController extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getPathInfo();
        
        switch (action) {
            case "/list":
                List<User> users = UserService.findAll();
                request.setAttribute("users", users);
                request.getRequestDispatcher("/user/list.jsp").forward(request, response);
                break;
            case "/edit":
                String id = request.getParameter("id");
                User user = UserService.findById(id);
                request.setAttribute("user", user);
                request.getRequestDispatcher("/user/edit.jsp").forward(request, response);
                break;
            default:
                response.sendError(HttpServletResponse.SC_NOT_FOUND);
        }
    }
}

list.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>User List</title>
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h1>User List</h1>
    <table border="1">
        <thead><tr><th>ID</th><th>Name</th><th>Actions</th></tr></thead>
        <tbody>
            <c:forEach items="${users}" var="user">
                <tr>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>
                        <button class="edit-btn" data-id="${user.id}">Edit</button>
                        <button class="delete-btn" data-id="${user.id}">Delete</button>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

    <div id="content"></div>

    <script>
        $(document).ready(function() {
            $('.edit-btn').on('click', function() {
                let id = $(this).data('id');
                $.get('/user/edit', { id: id }, function(data) {
                    $('#content').html(data);
                });
            });

            $('.delete-btn').on('click', function() {
                let id = $(this).data('id');
                if (confirm('Are you sure?')) {
                    $.post('/user/delete', { id: id }, function(result) {
                        if (result.success) {
                            location.reload();
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>

edit.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Edit User</title>
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h1>Edit User</h1>
    <form id="userForm">
        <input type="hidden" name="id" value="${user.id}">
        <label>Name: <input type="text" name="name" value="${user.name}"></label><br>
        <label>Email: <input type="email" name="email" value="${user.email}"></label><br>
        <button type="submit">Save</button>
    </form>

    <script>
        $('#userForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: '/user/save',
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    alert('Saved successfully');
                    location.href = '/user/list';
                }
            });
        });
    </script>
</body>
</html>

六、源码解析

1. JSP页面的执行流程

  1. 客户端请求到达Tomcat
  2. Tomcat将JSP编译为Servlet类（首次访问时）
  3. Servlet类执行，处理JSP中的脚本和标签
  4. 生成HTML响应返回给客户端

2. JQuery的事件绑定机制

  • 事件委托（$(document).on()）：避免动态内容事件丢失
  • data()方法：存储和获取DOM元素的自定义属性
  • serialize()方法：将表单数据转换为查询字符串

3. AJAX通信细节

  • $.get()：GET请求，适合获取数据
  • $.post()：POST请求，适合提交数据
  • $.ajax()：更灵活的配置选项

七、进阶使用

1. 前端模板引擎

可以结合JSTL标签库实现模板渲染：

<c:choose>
    <c:when test="${empty users}">
        <p>No users found.</p>
    </c:when>
    <c:otherwise>
        <!-- 表格内容 -->
    </c:otherwise>
</c:choose>

2. 前端状态管理

使用JQuery的.data()方法管理状态：

$('#userForm').data('user', user);

3. 跨域请求处理

配置Tomcat的web.xml支持CORS：

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET, POST, HEAD, OPTIONS</param-value>
    </init-param>
</filter>

八、性能与工程实践

1. 性能优化

  1. JSP预编译：使用<%@ page session="false" %>减少内存占用
  2. 缓存机制：使用<c:cache>标签缓存静态内容
  3. 减少DOM操作：使用documentFragment批量操作DOM
  4. AJAX分页：避免一次性加载大量数据

2. 异常处理

$.ajax({
    url: '/user/save',
    method: 'POST',
    data: $(this).serialize(),
    error: function(xhr, status, error) {
        alert('Error: ' + error);
    }
});

3. 安全措施

  1. XSS防护：使用JSTL的fn:escapeXml()转义输出
  2. CSRF防护：在Servlet中生成并验证token
  3. 输入验证：使用JQuery的$.trim()和正则表达式校验

九、常见问题与踩坑

1. 常见错误

错误示例：

$('#userForm').submit(function(e) {
    e.preventDefault();
    $.post('/user/save', $(this).serialize());
});

问题： 未处理响应结果，可能导致页面无法刷新

改进方案：

$('#userForm').on('submit', function(e) {
    e.preventDefault();
    $.post('/user/save', $(this).serialize(), function(response) {
        if (response.success) {
            location.reload();
        }
    });
});

2. 跨域问题

错误场景： 前端在http://localhost:8080，后端在http://localhost:8081

解决方案：

  • 配置CORS过滤器
  • 使用代理服务器（如Nginx）
  • 使用fetch()并配置mode: 'cors'

3. 事件绑定失效

错误场景： 动态添加的元素无法触发事件

解决方案：
使用事件委托：

$(document).on('click', '.edit-btn', function() { ... });

十、最佳实践

1. 推荐方案

  • 使用JSTL标签库替代内联Java代码
  • 采用MVC分层架构，严格分离Model/View/Controller
  • 对关键业务逻辑进行单元测试
  • 使用JSP的<jsp:include>实现组件化开发

2. 实施建议

  • 对复杂业务逻辑使用JavaBean封装
  • 使用<c:forEach>替代内联循环
  • 对敏感操作进行双重验证（前端+后端）
  • 使用<c:if>进行条件渲染，提高可维护性

十一、总结

JSP+JQuery作为MVC前端方案，虽然在现代开发中不再是主流选择，但在特定场景下仍具有现实意义。其核心价值在于：

  • 通过JSP实现服务器端渲染，保证SEO友好性
  • 利用JQuery简化前端交互，降低开发复杂度
  • 通过MVC分层架构实现清晰的业务逻辑分离

适用场景：

  1. 需要SEO优化的遗留系统改造
  2. 对服务器端渲染有强制要求的项目
  3. 与Java后端深度集成的系统
  4. 对前端技术栈要求较低的快速开发

不适用场景：

  1. 需要高度交互的单页应用
  2. 对性能有极高要求的实时系统
  3. 需要复杂状态管理的现代前端应用
  4. 涉及大量动态内容的富互联网应用

在实际开发中，建议结合现代前端框架（如React/Vue）进行技术选型，同时保留关键业务逻辑的服务器端处理，以达到技术栈的最优平衡。

评论已关闭

推荐阅读

AIGC实战——Transformer模型
2024年12月01日
python , AI , 机器学习
Socket TCP 和 UDP 编程基础（Python）
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色？你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别（详细教程）
2024年11月24日
python , AI
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
python , AI
omegaconf，一个超强的 Python 库！
2024年11月24日
python
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
python , AI
［超级详细］如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
python , AI , 机器学习
Python 物理引擎pymunk最完整教程
2024年11月27日
python
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
python
深入了解 Taipy：Python 打造 Web 应用的全面教程
2024年11月26日
python
基于Transformer的时间序列预测模型
2024年11月25日
python , Matplotlib , 机器学习
Python在金融大数据分析中的AI应用（股价分析、量化交易）实战
2024年11月25日
python , Matplotlib , 机器学习
AIGC Gradio系列学习教程之Components
2024年12月01日
python , AI
Python3 `asyncio` — 异步 I/O，事件循环和并发工具
2024年11月30日
python
llama-factory SFT系列教程：大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
python , AI , 机器学习
Python 多线程和多进程用法
2024年11月24日
python
Python socket详解，全网最全教程
2024年11月27日
python , http , websocket
python之plot()和subplot()画图
2024年11月26日
python , Matplotlib
理解 DALL·E 2、Stable Diffusion 和 Midjourney 工作原理
2024年12月01日
python , AI , 机器学习
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号