怎么在jsp页面显示json对象

如何在JSP页面显示JSON对象

在Java Web开发中，JSP页面经常需要处理和显示JSON数据，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛应用于前后端数据交互，本文将详细介绍几种在JSP页面显示JSON对象的方法。

直接在JSP中嵌入JSON字符串

最简单的方法是在JSP页面中直接嵌入JSON字符串,然后通过JavaScript解析和显示。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>显示JSON对象</title>
    <script>
        // 直接定义JSON字符串
        var jsonString = '{"name":"张三","age":25,"city":"北京"}';
        // 解析JSON字符串
        var jsonObj = JSON.parse(jsonString);
        // 显示JSON数据
        document.write("姓名: " + jsonObj.name + "<br>");
        document.write("年龄: " + jsonObj.age + "<br>");
        document.write("城市: " + jsonObj.city);
    </script>
</head>
<body>
</body>
</html>

从Servlet传递JSON数据到JSP

在实际应用中,JSON数据通常由Servlet生成并传递给JSP页面。

Servlet端生成JSON

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException {
    // 创建JSON对象
    JSONObject jsonObj = new JSONObject();
    jsonObj.put("name", "李四");
    jsonObj.put("age", 30);
    jsonObj.put("city", "上海");
    // 将JSON对象放入request作用域
    request.setAttribute("userJson", jsonObj.toString());
    // 转发到JSP页面
    request.getRequestDispatcher("/showJson.jsp").forward(request, response);
}

JSP页面接收并显示JSON

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>显示Servlet传递的JSON</title>
    <script>
        // 从request作用域获取JSON字符串
        var jsonString = '${userJson}';
        // 解析JSON字符串
        var jsonObj = JSON.parse(jsonString);
        // 显示JSON数据
        document.write("姓名: " + jsonObj.name + "<br>");
        document.write("年龄: " + jsonObj.age + "<br>");
        document.write("城市: " + jsonObj.city);
    </script>
</head>
<body>
</body>
</html>

使用AJAX从服务器获取JSON数据

对于更复杂的应用,可以使用AJAX从服务器异步获取JSON数据并在JSP页面中显示。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>使用AJAX显示JSON</title>
    <script>
        function loadJsonData() {
            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 配置请求
            xhr.open('GET', 'getUserJson', true);
            // 设置回调函数
            xhr.onload = function() {
                if (xhr.status === 200) {
                    // 解析响应的JSON数据
                    var jsonObj = JSON.parse(xhr.responseText);
                    // 在页面中显示数据
                    document.getElementById('name').innerHTML = jsonObj.name;
                    document.getElementById('age').innerHTML = jsonObj.age;
                    document.getElementById('city').innerHTML = jsonObj.city;
                }
            };
            // 发送请求
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="loadJsonData()">加载JSON数据</button>
    <div>
        <p>姓名: <span id="name"></span></p>
        <p>年龄: <span id="age"></span></p>
        <p>城市: <span id="city"></span></p>
    </div>
</body>
</html>

使用JSTL和EL表达式显示JSON

如果使用JSTL和EL表达式,可以更优雅地处理JSON数据。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>使用JSTL显示JSON</title>
    <script>
        // 将EL表达式中的JSON字符串转换为JavaScript对象
        function parseJsonFromEl(jsonString) {
            return JSON.parse(jsonString);
        }
    </script>
</head>
<body>
    <c:set var="jsonString" value='${userJson}' />
    <c:set var="jsonObj" value='${fn:escapeXml(jsonString)}' />
    <script>
        var jsonObj = parseJsonFromEl('${jsonObj}');
        document.write("<p>姓名: " + jsonObj.name + "</p>");
        document.write("<p>年龄: " + jsonObj.age + "</p>");
        document.write("<p>城市: " + jsonObj.city + "</p>");
    </script>
</body>
</html>