引言：JSON与JSP的结合
在现代Web开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，已经成为前后端分离架构中不可或缺的组件。而JSP（JavaServer Pages）作为Java EE平台上的动态网页技术，虽然在现代开发中逐渐被前后端分离架构所取代，但在许多传统企业应用和遗留系统中仍然广泛使用。
本文将深入探讨如何在JSP页面中实现JSON数据的转发与动态渲染，涵盖从基础概念到高级应用的完整流程。我们将通过详细的步骤说明和完整的代码示例，帮助您掌握这一技术。
1. 理解JSON数据在Web应用中的角色
1.1 JSON的基本结构
JSON是一种基于文本的、轻量级的数据交换格式，它使用人类可读的文本来存储和传输数据对象。JSON有两种基本结构：
键值对集合
：对象（Object），使用花括号
{}
表示
有序值列表
：数组（Array），使用方括号
[]
表示
// 一个简单的JSON对象示例
{
“name”: “张三”,
“age”: 25,
“skills”: [“Java”, “JavaScript”, “SQL”],
“address”: {
“city”: “北京”,
“street”: “朝阳区”
}
}
1.2 JSON在Web应用中的典型使用场景
API数据传输
：前后端分离架构中，后端API返回JSON格式数据
配置数据存储
：应用配置信息以JSON格式存储
会话数据传递
：在不同页面间传递结构化数据
AJAX响应
：异步请求的响应数据格式
2. JSP页面中处理JSON数据的基础
2.1 JSP页面的基本结构
JSP页面本质上是一个HTML文档，其中嵌入了Java代码片段。JSP页面在服务器端执行，生成HTML输出发送到客户端浏览器。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>






<%-- JSP脚本元素 --%>


2.2 JSP页面中获取JSON数据的几种方式
2.2.1 从请求属性中获取JSON数据
在Servlet中处理请求后，将JSON数据作为属性存储在request对象中，然后转发到JSP页面：
// Servlet代码示例
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

// 创建JSON数据
String jsonData = “{\”name\”:\”张三\”,\”age\”:25}”;

// 将JSON数据存储在request属性中
request.setAttribute(“userData”, jsonData);

// 转发到JSP页面
request.getRequestDispatcher(“/userProfile.jsp”).forward(request, response);
}
2.2.2 从会话中获取JSON数据
// 在Servlet中存储到session
HttpSession session = request.getSession();
session.setAttribute(“userPreferences”, “{\”theme\”:\”dark\”,\”language\”:\”zh\”}”);
2.2.3 从数据库或其他数据源获取JSON数据
// 从数据库获取JSON数据
String jsonDataFromDB = getJsonDataFromDatabase();
request.setAttribute(“dbData”, jsonDataFromDB);
3. JSON数据在JSP页面中的转发机制
3.1 请求转发与重定向的区别
在Web开发中，转发（Forward）和重定向（Redirect）是两种不同的请求处理方式：
特性
转发（Forward）
重定向（Redirect）
工作方式
服务器内部跳转
客户端重新发起请求
数据共享
共享request对象
不共享request对象
URL变化
不变
改变
性能
更快（服务器内部）
较慢（需要新请求）
3.2 在Servlet中实现JSON数据的转发
// 完整的Servlet示例
@WebServlet(“/api/user”)
public class UserServlet extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

try {
// 模拟从数据库获取用户数据
User user = getUserFromDatabase(1);

// 将Java对象转换为JSON字符串
ObjectMapper mapper = new ObjectMapper();
String jsonUserData = mapper.writeValueAsString(user);

// 将JSON数据存储在request属性中
request.setAttribute(“jsonUser”, jsonUserData);

// 转发到JSP页面
request.getRequestDispatcher(“/userDisplay.jsp”).forward(request, response);

} catch (Exception e) {
throw new ServletException(“处理用户数据时出错”, e);
}
}

private User getUserFromDatabase(int userId) {
// 模拟数据库查询
User user = new User();
user.setId(userId);
user.setName(“张三”);
user.setEmail(“zhangsan@example.com”);
user.setAge(25);
return user;
}
}
3.3 JSP页面接收转发的JSON数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%@ page import="com.fasterxml.jackson.databind.*" %>

用户信息

4. JSON数据在JSP页面中的动态渲染技术
4.1 使用JavaScript解析JSON数据
4.1.1 基础解析方法
// 从JSP获取JSON字符串
const jsonString = ‘<%= request.getAttribute("jsonData") %>‘;

// 解析JSON字符串
try {
const data = JSON.parse(jsonString);
console.log(‘解析成功:’, data);
} catch (e) {
console.error(‘JSON解析错误:’, e);
}
4.1.2 处理复杂JSON结构
// 复杂JSON示例
const complexJson = {
“users”: [
{
“id”: 1,
“name”: “张三”,
“roles”: [“admin”, “user”],
“profile”: {
“avatar”: “avatar1.jpg”,
“bio”: “开发工程师”
}
},
{
“id”: 2,
“name”: “李四”,
“roles”: [“user”],
“profile”: {
“avatar”: “avatar2.jpg”,
“bio”: “设计师”
}
}
],
“total”: 2,
“page”: 1
};

// 渲染用户列表
function renderUserList(data) {
const userList = document.getElementById(‘userList’);
userList.innerHTML = ”; // 清空现有内容

data.users.forEach(user => {
const li = document.createElement(‘li’);
li.innerHTML = `
${user.name} – ${user.profile.bio}

角色: ${user.roles.join(‘, ‘)}
`;
userList.appendChild(li);
});

// 更新总数信息
document.getElementById(‘totalCount’).textContent = data.total;
}
4.2 使用JSTL和EL表达式处理JSON
虽然JSTL和EL表达式主要用于处理Java对象，但也可以与JSON数据结合使用：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<% // 假设request中有一个JSON字符串 String jsonStr = "{\"name\":\"张三\",\"age\":25,\"skills\":[\"Java\",\"JavaScript\"]}"; request.setAttribute("jsonString", jsonStr); %>

<%-- 使用JSTL处理 --%>

JSON数据存在

<%-- 注意：JSTL不能直接解析JSON，需要借助JavaScript --%>

没有JSON数据

4.3 使用AJAX在JSP页面中动态加载JSON
4.3.1 创建AJAX请求的JSP页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

AJAX动态加载JSON数据

重新加载数据

4.3.2 对应的Servlet处理AJAX请求
@WebServlet(“/api/data”)
public class DataServlet extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

// 设置响应内容类型为JSON
response.setContentType(“application/json”);
response.setCharacterEncoding(“UTF-8”);

// 构建JSON响应数据
String jsonResponse = “{\”items\”:[{\”name\”:\”项目1\”,\”value\”:\”100\”},{\”name\”:\”项目2\”,\”value\”:\”200\”}]}”;

// 发送JSON响应
PrintWriter out = response.getWriter();
out.print(jsonResponse);
out.flush();
}
}
4.4 使用现代前端框架（如Vue.js）在JSP中渲染JSON
虽然JSP是传统技术，但我们可以引入现代前端框架来增强JSON渲染能力：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>