Spring 后端传输Json数据并格式化显示

最新推荐文章于 2025-05-17 10:15:00 发布

赖在马路边的树袋熊

最新推荐文章于 2025-05-17 10:15:00 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Spring MAVEN Java

本文链接：https://blog.youkuaiyun.com/guochao6531/article/details/83592691

Java 同时被 3 个专栏收录

25 篇文章

订阅专栏

Spring

5 篇文章

订阅专栏

MAVEN

4 篇文章

订阅专栏

本文详细介绍如何在SpringMVC中使用@ResponseBody注解返回JSON格式的数据，并通过Ajax异步请求获取这些数据，同时展示了如何在前端使用JSONView插件解析并显示JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先Spring mvc服务器返回Json数据-String字符串
需要添加@ResponseBody，代码：

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class GoViews {

    @RequestMapping("goView")
    @ResponseBody
    public String goNewView(String name, Model model) {
        model.addAttribute("name", name);
        String result = "{\n" +
                "\t\"A\": \"Test\",\n" +
                "\t\"Name\": \"Action\"\n" +
                "}";
        return result;
    }
}

2、前端使用Ajax异步访问后端，刷新界面，这里面用到了一个插件，可以看Json-view插件使用，然后另外指出如果使用插件js里面，报错 $("").JSONView(json) is not a function，需要看另一篇博客，感谢下博主jsp不能引用js，cs等解决办法，最后贴下前端代码：

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="jquery.jsonview.js"></script>
    <script type="text/javascript">
        function goNewWindow() {
            $.ajax({
                type: "POST",
                url: "/goView",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: {name: name},
                success:function(data){
                    var json = eval(data);
                    $.each(json, function(index, element) {
                        alert(element.a);
                        alert(element.b);
                    });

                    //$('#result').html();
                    $("#result").JSONView(json);
                }
            });
        }

    </script>
</head>
<body>
<input type="button" name="按键" onclick="goNewWindow()"/>
<tr></tr>
结果：
<div id="result" ></div>
</body>
</html>

3、最后的结果：
{
“A”: “Test”,
“Name”: “Action”
}
格式化显示出结果！！