使用Java Servlet和JSON进行前后端数据交互
在现代Web应用开发中,前后端数据交互是一个至关重要的环节。本文将演示如何使用Java Servlet将非字符串数据序列化为JSON格式,并通过AJAX将其传递给前端页面。我们将通过一个简单的例子来实现这个过程,包括后端Java代码和前端HTML/JavaScript代码。
后端代码:Java Servlet
首先,我们需要创建一个Java Servlet来处理JSON数据的生成和传递。以下是一个简单的Servlet实现,它将一个Student
对象的列表序列化为JSON字符串,并将其发送到前端页面。
Java Servlet代码
@WebServlet("/json")
public class JsonServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 创建一个学生对象列表
ArrayList<Student> students = new ArrayList<>();
Student student1 = new Student(12, "小龙", "男", 18, "IT");
students.add(student1);
// 设置响应数据的编码
resp.setCharacterEncoding("UTF-8");
// 导入阿里巴巴的JSON转换工具,将学生列表序列化为JSON字符串
String jsonResponse = JSON.toJSONString(students);
// 设置数据类型为JSON
resp.setContentType("application/json");
// 获取响应的输出流,并写入JSON数据
PrintWriter writer = resp.getWriter();
writer.write(jsonResponse);
// 确保数据被写入并释放资源
writer.flush();
writer.close();
}
}
前端代码:HTML和JavaScript
前端页面将通过AJAX请求从Servlet获取JSON数据,并将其展示在网页上。以下是前端HTML和JavaScript代码的实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息展示</title>
</head>
<body>
<div id="show" style="border: 1px red; width: 200px; height: 100px"></div>
学号: <span class="sno"></span><br>
姓名: <span class="name"></span><br>
<button onclick="fetchStudentData()">获取</button>
<script>
function fetchStudentData() {
// 1: 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 2: 配置后端请求
xhr.open("GET", "/stage1_war_exploded/json", true);
// 3: 发送请求
xhr.send();
// 4: 监听数据是否请求成功
xhr.onreadystatechange = function () {
// 5: 如果服务器成功解析数据则readyState=4, 如果后端成功返回数据则status=200
if (xhr.readyState == 4 && xhr.status == 200) {
// 6: 获取后端数据并反序列化为JSON对象
let data = JSON.parse(xhr.responseText);
// 7: 将数据插入前端页面
document.querySelector(".sno").innerHTML = data[0].sno;
document.querySelector(".name").innerHTML = data[0].name;
}
};
}
</script>
</body>
</html>
在这个HTML页面中,我们创建了一个按钮和两个用于显示学生学号和姓名的<span>
元素。点击按钮时,会调用fetchStudentData
函数,该函数通过AJAX向Servlet发送请求,并将返回的JSON数据插入到页面中。