JSP页面如何获取JSON数据:从基础到实践的完整指南
在Web开发中,JSON(JavaScript Object Notation)因其轻量级、易解析的特性,已成为前后端数据交互的主流格式,JSP(JavaServer Pages)作为Java EE中的动态页面技术,常用于展示后端传递的数据,本文将详细介绍JSP页面获取JSON数据的多种方式,从基础的<script>标签嵌入到现代AJAX请求,并附完整代码示例,帮助开发者不同场景下的实践方法。
JSP获取JSON数据的常见场景
JSP页面获取JSON数据通常用于以下场景:
- 后端接口返回JSON:后端Servlet、Spring MVC等框架将Java对象转换为JSON,响应给前端JSP页面。
- 静态JSON嵌入:JSON数据直接写在JSP页面中(如配置数据、少量测试数据)。
- AJAX异步请求:前端通过AJAX从后端接口动态获取JSON数据,实现页面局部刷新。
方法一:直接在JSP中嵌入静态JSON数据
对于少量固定数据(如页面初始化配置、下拉框选项),可直接将JSON数据定义为JavaScript变量,嵌入JSP页面,这种方式无需后端接口,适合简单场景。
实现步骤
- 定义JSON数据:在JSP的
<script>标签中,将JSON数据赋值给JavaScript变量。 - 使用EL表达式或JSTL动态拼接(可选):若JSON数据需后端动态生成(如从数据库查询的配置),可通过EL表达式或JSTL将Java变量转换为JSON字符串。
示例代码
静态JSON(固定数据)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>静态JSON示例</title>
</head>
<body>
<h1>用户列表</h1>
<div id="userList"></div>
<script>
// 直接在JSP中定义JSON数据
var staticJson = [
{"id": 1, "name": "张三", "age": 25},
{"id": 2, "name": "李四", "age": 30},
{"id": 3, "name": "王五", "age": 28}
];
// 渲染数据到页面
var userListHtml = "<ul>";
staticJson.forEach(function(user) {
userListHtml += "<li>ID: " + user.id + ", 姓名: " + user.name + ", 年龄: " + user.age + "</li>";
});
userListHtml += "</ul>";
document.getElementById("userList").innerHTML = userListHtml;
</script>
</body>
</html>
动态JSON(后端拼接)
若JSON数据需后端动态生成(如从数据库查询),可通过EL表达式将Java对象转换为JSON字符串(需结合Gson、Jackson等工具类)。
后端Servlet代码(UserController.java):
import com.google.gson.Gson;
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;
import java.util.Arrays;
import java.util.List;
@WebServlet("/api/users")
public class UserController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 模拟数据库查询数据
List<User> users = Arrays.asList(
new User(1, "张三", 25),
new User(2, "李四", 30),
new User(3, "王五", 28)
);
// 使用Gson将List转换为JSON字符串
Gson gson = new Gson();
String jsonStr = gson.toJson(users);
// 将JSON数据存入request作用域
req.setAttribute("usersJson", jsonStr);
req.getRequestDispatcher("/users.jsp").forward(req, resp);
}
}
class User {
private int id;
private String name;
private int age;
// 构造方法、getter/setter省略
}
JSP页面(users.jsp):
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>动态JSON示例</title>
</head>
<body>
<h1>用户列表(动态JSON)</h1>
<div id="userList"></div>
<script>
// 通过EL表达式获取后端传递的JSON字符串
var usersJson = '${usersJson}';
// 解析JSON字符串为JavaScript对象
var users = JSON.parse(usersJson);
// 渲染数据
var userListHtml = "<ul>";
users.forEach(function(user) {
userListHtml += "<li>ID: " + user.id + ", 姓名: " + user.name + ", 年龄: " + user.age + "</li>";
});
userListHtml += "</ul>";
document.getElementById("userList").innerHTML = userListHtml;
</script>
</body>
</html>
注意:直接通过EL表达式输出JSON字符串时,需确保后端生成的字符串格式正确(如避免未转义的引号),否则可能导致JavaScript解析错误。
方法二:通过AJAX异步获取JSON数据
当需要动态加载数据(如分页查询、实时搜索)时,AJAX是更优选择,JSP页面可通过XMLHttpRequest或fetch API向后端接口发送请求,获取JSON数据并渲染。
核心步骤
- 后端接口提供JSON数据:后端Servlet或Spring MVC接口返回
application/json格式的响应。 - 前端AJAX请求:使用
fetch(现代浏览器)或XMLHttpRequest发起异步请求。 - 处理响应数据:解析JSON字符串,动态更新JSP页面内容。
示例代码(基于Fetch API)
后端接口(同上文UserController,直接返回JSON)
修改UserController,直接返回JSON响应(不转发到JSP):
@WebServlet("/api/users")
public class UserController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
List<User> users = Arrays.asList(
new User(1, "张三", 25),
new User(2, "李四", 30),
new User(3, "王五", 28)
);
resp.setContentType("application/json;charset=UTF-8");
resp.getWriter().write(new Gson().toJson(users));
}
}
JSP页面(AJAX请求)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>AJAX获取JSON示例</title>
<style>
#userList { margin-top: 20px; }
.user-item { padding: 8px; border-bottom: 1px solid #eee; }
</style>
</head>
<body>
<h1>用户列表(AJAX加载)</h1>
<button id="loadUsers">加载用户数据</button>
<div id="userList"></div>
<script>
document.getElementById("loadUsers").addEventListener("click", function() {
// 1. 发起AJAX请求
fetch("/api/users")
.then(response => {
if (!response.ok) {
throw new Error("网络请求失败");
}
return response.text(); // 获取响应文本
})
.then(data => {
// 2. 解析JSON字符串
var users = JSON.parse(data);
// 3. 渲染数据
renderUsers(users);
})
.catch(error => {
console.error("请求错误:", error);
document.getElementById("userList").innerHTML =
"<p style='color: red;'>加载失败:" + error.message + "</p>";
});
});
// 渲染用户列表的函数
function renderUsers(users) {
var userListHtml = "";
users.forEach(function(user) {
userListHtml +=
'<div class="user-item">' +
'ID: ' + user.id + ', 姓名: ' + user.name + ', 年龄: ' + user.age +
'</div>';
});
document.getElementById("userList").innerHTML = userListHtml;
}
</script>
</body>
</html>
关键点说明
fetchAPI:现代浏览器内置,支持Promise,语法更简洁。response.text()用于获取响应文本(JSON字符串),后续通过JSON.parse()解析。- 错误处理:需检查
response.ok(HTTP状态码200-299),并捕获网络异常或解析错误。 - 跨域问题:若后端接口与JSP页面不同源(如不同端口、域名),需在后端配置CORS(如添加响应头`Access-Control-Allow-Origin: *



还没有评论,来说两句吧...