Java Web返回JSON无法在goods_detail.html中渲染的技术求助

问题背景 #

Java Web的/goods_detail接口已通过Postman验证能正确返回商品JSON数据，但前端goods_detail.html无法将JSON数据渲染到页面上。

接口返回的JSON示例 #

{"id":3,"name":"聯想天逸510S","price":3099.0,"description":"聯想（Lenovo）天逸510S商用台式辦公電腦整機（i3-7100 4G 1T 集顯 WiFi 藍牙 三年上門 win10）19.5英吋","brand":"聯想（Lenovo）","cpuBrand":"Intel","cpuType":"Intel i3","memoryCapacity":"4G","hdCapacity":"1T","cardModel":"集成顯卡","image":"5a6e946eNd622e938.jpg","displaysize":""}

后端Controller代码 #

@GetMapping("/goods_detail")
public ResponseEntity<Goods> getGoods(@RequestParam("goodsId") Integer goodsId){
    Goods goods = goodsService.getGoodsById(goodsId);

    if(goods != null){
        return ResponseEntity.status(HttpStatus.OK).body(goods);
    }else {
        return ResponseEntity.status(HttpStatus.NOT_FOUND).build();
    }
}

问题排查与修复方案 #

1. 字段名大小写不匹配 #

JSON返回的显示器尺寸字段是displaysize（全小写），但前端代码中使用goods.displaySize（驼峰式大写S），导致取值失败。

2. 图片路径不完整 #

接口仅返回图片文件名，前端直接赋值会导致浏览器找不到资源，需要拼接完整的静态资源路径（比如/images/，根据实际项目静态资源目录调整）。

3. 价格符号错误 #

前端价格显示用了$，但实际是人民币，应改为￥。

4. 额外调试建议 #

• 打开浏览器控制台（F12）查看Network标签，确认fetch请求是否成功，返回的JSON数据是否正确
• 查看Console标签是否有报错信息，帮助定位问题

修复后的goods_detail.html脚本部分 #

<script>
    async function fetchGoods() {
        const params = new URLSearchParams(window.location.search);
        const goodsId = params.get('goodsId');

        if (!goodsId) {
            alert('商品 ID 不存在');
            return;
        }

        try {
            const response = await fetch(`/goods_detail?goodsId=${goodsId}`);
            if (!response.ok) {
                throw new Error('獲取商品數據失敗');
            }

            const goods = await response.json();
            // 填充商品數據
            document.getElementById("description").textContent = goods.description || '無描述';
            // 拼接图片完整路径，根据实际静态资源目录调整
            document.getElementById("product-image").src = `/images/${goods.image}` || 'default.jpg';
            // 修正价格符号
            document.getElementById("price").textContent = `￥${goods.price}元`;
            document.getElementById("brand").textContent = goods.brand || '未知';
            document.getElementById("cpuBrand").textContent = goods.cpuBrand || '未知';
            document.getElementById("memoryCapacity").textContent = goods.memoryCapacity || '未知';
            document.getElementById("cpuType").textContent = goods.cpuType || '未知';
            document.getElementById("hdCapacity").textContent = goods.hdCapacity || '未知';
            document.getElementById("cardModel").textContent = goods.cardModel || '未知';
            // 修正字段名为displaysize
            document.getElementById("displaySize").textContent = goods.displaysize || '未知';
        } catch (error) {
            console.error(error.message);
            alert('無法獲取商品數據，請稍後重試。');
        }
    }

    window.onload = fetchGoods;
</script>

补充说明 #

如果是前后端分离架构，需要确保fetch的URL是完整的后端接口地址（比如http://localhost:8080/goods_detail?goodsId=${goodsId}），同时后端需要配置跨域支持。

内容的提问来源于stack exchange，提问作者呂逸承