JS中的JSON数据怎么显示在JSP里？一篇搞定前后端数据交互与展示
在Web开发中,JavaScript（JS）处理JSON数据并将其显示在JSP（JavaServer Pages）页面中是一个非常常见的需求，JSON（JavaScript Object Notation）因其轻量级、易读易写的特性，成为了前后端数据交互的首选格式，本文将详细介绍如何将JS中的JSON数据有效地展示在JSP页面上，涵盖从后端数据传递到前端渲染的完整流程。
理解JSON与JSP的基本交互原理
要实现JS中的JSON数据在JSP中显示,首先需要明白它们之间的交互关系：
- JSP：服务器端技术，负责生成动态HTML内容，可以在服务器端执行Java代码，并将结果嵌入到HTML中。
- JSON：轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
- JavaScript：客户端脚本语言，可以在浏览器中运行，负责处理JSON数据并动态更新页面内容。
基本的交互流程是：JSP页面从后端（如Java Servlet）获取JSON数据（可以直接在JSP中生成，也可以通过AJAX从服务器异步获取），然后使用JavaScript处理这些JSON数据，并将其动态渲染到HTML元素中。
方法一：JSP中直接嵌入JSON数据，JS读取并显示
这种方法适用于JSP页面可以直接从后端获取JSON数据,并在页面加载时就将其传递给JavaScript的情况。
步骤1：在JSP中准备JSON数据
可以在JSP的<script>标签内直接定义JSON数据，或者通过JSP的EL表达式、JSTL标签等从后端Java代码中获取数据并转换为JSON字符串。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>JSON数据在JSP中显示</title>
</head>
<body>
<h1>用户列表</h1>
<ul id="userList"></ul>
<%-- 方式1：直接在JSP中定义JSON字符串 --%>
<script>
var jsonData1 = [
{"id": 1, "name": "张三", "age": 25},
{"id": 2, "name": "李四", "age": 30},
{"id": 3, "name": "王五", "age": 28}
];
<%-- 方式2：从后端Java代码获取JSON数据（假设已经通过某种方式放入request scope） --%>
<%-- 在Servlet中：request.setAttribute("jsonString", "[{\"id\":4,\"name\":\"赵六\",\"age\":35}]"); --%>
var jsonData2 = ${jsonString}; // EL表达式直接输出，注意确保jsonString是合法的JSON字符串
// 或者使用JSTL的out标签，但EL更简洁
// <c:out value="${jsonString}" escapeXml="false"/> 需要将其赋值给JS变量
</script>
</body>
</html>
注意：
- 如果从后端Java代码获取JSON字符串,确保该字符串是合法的JSON格式，并且没有包含会导致JS语法错误的字符（如未转义的引号）。
- 使用EL表达式
${jsonString}时，如果jsonString为null或空，可能会导致JS错误，因此最好进行判断：var jsonData2 = ${not empty jsonString ? jsonString : '[]'};
步骤2：使用JavaScript遍历JSON数据并动态生成HTML元素
定义好JSON数据后,使用JavaScript的forEach方法（或传统的for循环）遍历JSON数组，然后创建相应的HTML元素（如<li>, <div>, <span>等），并将数据填充进去，最后将这些元素添加到页面中指定的容器内。
<script>
// 假设我们使用上面定义的jsonData1
function displayUsers(jsonData) {
var userListElement = document.getElementById("userList");
// 清空现有内容（可选）
userListElement.innerHTML = "";
if (jsonData && jsonData.length > 0) {
jsonData.forEach(function(user) {
var li = document.createElement("li");
li.textContent = "ID: " + user.id + ", 姓名: " + user.name + ", 年龄: " + user.age;
userListElement.appendChild(li);
});
} else {
userListElement.innerHTML = "<li>暂无用户数据</li>";
}
}
// 调用函数显示数据
displayUsers(jsonData1);
// 如果有jsonData2，也可以调用 displayUsers(jsonData2);
</script>
步骤3：更复杂的渲染（可选）
如果需要更复杂的展示,例如表格、卡片式布局等，可以创建更复杂的HTML结构，并利用CSS进行美化。
<script>
function displayUsersInTable(jsonData) {
var tableContainer = document.getElementById("tableContainer");
tableContainer.innerHTML = ""; // 清空
if (jsonData && jsonData.length > 0) {
var table = document.createElement("table");
table.border = "1";
table.style.width = "100%";
table.cellPadding = "5";
// 创建表头
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
["ID", "姓名", "年龄"].forEach(function(headerText) {
var th = document.createElement("th");
th.textContent = headerText;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
// 创建表体
var tbody = document.createElement("tbody");
jsonData.forEach(function(user) {
var row = document.createElement("tr");
["id", "name", "age"].forEach(function(key) {
var td = document.createElement("td");
td.textContent = user[key];
row.appendChild(td);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
tableContainer.appendChild(table);
} else {
tableContainer.innerHTML = "<p>暂无用户数据</p>";
}
}
// 假设有一个id为tableContainer的div
// <div id="tableContainer"></div>
// displayUsersInTable(jsonData1);
</script>
方法二：通过AJAX从JSP（后端）获取JSON数据并显示
当JSON数据需要异步加载,或者JSP页面本身不直接包含JSON数据（而是通过Servlet等后端服务提供时），可以使用AJAX（Asynchronous JavaScript and XML）技术从服务器获取JSON数据，然后在客户端动态显示。
步骤1：JSP页面提供显示容器和AJAX请求代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>AJAX获取JSON数据并显示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 可选：使用jQuery简化AJAX -->
</head>
<body>
<h1>异步加载用户列表</h1>
<button id="loadUsersBtn">加载用户</button>
<div id="userContainer"></div>
<script>
// 原生JavaScript实现AJAX
document.getElementById("loadUsersBtn").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "getUsersJson.do", true); // 假设后端有个getUsersJson.do接口返回JSON数据
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
try {
var jsonData = JSON.parse(xhr.responseText);
displayUsers(jsonData);
} catch (e) {
console.error("JSON解析失败:", e);
document.getElementById("userContainer").innerHTML = "<p>数据解析错误</p>";
}
} else if (xhr.readyState === 4) {
document.getElementById("userContainer").innerHTML = "<p>加载数据失败</p>";
}
};
xhr.send();
});
// 使用jQuery实现AJAX（更简洁）
/*
$("#loadUsersBtn").click(function() {
$.ajax({
url: "getUsersJson.do",
type: "GET",
dataType: "json", // 服务器返回JSON格式数据
success: function(jsonData) {
displayUsers(jsonData);
},
error: function() {
$("#userContainer").html("<p>加载数据失败</p>");
}
});
});
*/
// 显示数据的函数（同方法一）
function displayUsers(jsonData) {
var container = document.getElementById("userContainer");
container.innerHTML = "";
if (jsonData && jsonData.length > 0) {
var ul = document.createElement("ul");
jsonData.forEach(function(user) {
var li = document.createElement("li");
li.textContent = "ID: " + user.id + ", 姓名: " + user.name + ", 年龄: " + user.age;
ul.appendChild(li);
});
container.appendChild(ul);
} else
还没有评论，来说两句吧...