Day17_2--JSON学习之序列化非字符串数据传给前端页面

使用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数据插入到页面中。