如何获取JSON数据并在HTML元素中展示？求可行实现方案

一、后端控制器与实体类校验 #

1. 修正后的JsonDataController #

确保控制器正确返回JSON，核心是添加@ResponseBody或使用@RestController替代@Controller：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

// 加@CrossOrigin解决跨域问题（如果前端后端端口/域名不同）
@CrossOrigin(origins = "*")
@RestController
@RequestMapping("/api")
public class JsonDataController {

    @GetMapping("/passbeer")
    public Passbeer getPassbeerData() {
        // 模拟构造Passbeer数据
        Passbeer beer = new Passbeer();
        beer.setId(1);
        beer.setName("美式IPA");
        beer.setAbv(6.8);
        beer.setBrewery("街角精酿厂");
        return beer;
    }
}

2. Passbeer实体类要求 #

必须提供无参构造函数和字段的getter方法（可通过Lombok简化）：

// 用Lombok简化写法
import lombok.Data;

@Data
public class Passbeer {
    private Integer id;
    private String name;
    private Double abv;
    private String brewery;
}

// 手动实现写法（无Lombok时）
public class Passbeer {
    private Integer id;
    private String name;
    private Double abv;
    private String brewery;

    public Passbeer() {}

    // 所有字段的getter方法
    public Integer getId() { return id; }
    public String getName() { return name; }
    public Double getAbv() { return abv; }
    public String getBrewery() { return brewery; }

    // 可选：setter方法（若需接收前端数据）
    public void setId(Integer id) { this.id = id; }
    public void setName(String name) { this.name = name; }
    public void setAbv(Double abv) { this.abv = abv; }
    public void setBrewery(String brewery) { this.brewery = brewery; }
}

3. 后端依赖与配置检查 #

• 确保Spring MVC已开启注解驱动：XML配置添加<mvc:annotation-driven/>，Java配置添加@EnableWebMvc。
• 确保引入Jackson依赖（Spring Boot默认包含，传统MVC需手动添加）：

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>

二、前端HTML与JS实现 #

1. 展示页面（index.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Passbeer 数据展示</title>
    <!-- 引入jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="myapp.js"></script>
</head>
<body>
    <h2>精酿啤酒详情</h2>
    <div id="beer-card">
        <p>ID：<span id="beer-id"></span></p>
        <p>名称：<span id="beer-name"></span></p>
        <p>酒精度：<span id="beer-abv"></span>%</p>
        <p>酿造厂：<span id="beer-brewery"></span></p>
    </div>
</body>
</html>

2. 核心JS逻辑（myapp.js） #

$(document).ready(function() {
    $.ajax({
        url: "/api/passbeer", // 与后端@RequestMapping路径完全匹配
        type: "GET",
        dataType: "json",
        success: function(data) {
            // 填充数据到页面元素
            $("#beer-id").text(data.id);
            $("#beer-name").text(data.name);
            $("#beer-abv").text(data.abv);
            $("#beer-brewery").text(data.brewery);
        },
        error: function(xhr, status, err) {
            // 错误排查：打印详细信息
            console.error("请求失败：", status, err);
            console.error("响应内容：", xhr.responseText);
            $("#beer-card").html("<p>数据加载失败，请检查后端服务</p>");
        }
    });
});

三、常见失败原因排查 #

• 路径不匹配：前端ajax的url必须和后端@RequestMapping的完整路径一致。
• 跨域问题：前后端端口/域名不同时，后端必须加@CrossOrigin注解。
• 实体类无getter：Jackson序列化需要getter方法读取字段，否则返回空JSON。
• 未加@ResponseBody/@RestController：缺少注解时Spring会尝试跳转视图，而非返回JSON。
• 请求方法不匹配：后端用@PostMapping时，前端必须用type: "POST"。

内容的提问来源于stack exchange，提问作者Demba