m0_62370567 2022-04-01 14:49 采纳率: 100%
浏览 149
已结题

在SSM项目中以JSON格式将数据返回给前端,前端该怎么接收和渲染

问题相关代码,请勿粘贴截图

controller

 @RequestMapping("/findByUserId")
    @ResponseBody
    public String findByUserId(int id) throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        List<Complain> list = new ArrayList<Complain>();
        list = complainService.findByUserId(id);
        return mapper.writeValueAsString(list);
    }

前端

<script>
        $(function (){
            $("#btn").click(function (){
                $.post("${pageContext.request.contextPath}/complain/findByUserId?id=${sessionScope.user.id}",function (data){
                    var str = "";
                    for (let i =0;i<data.length;i++){
                        str+="<tr>"+
                            "<td>"+data[i].id+"</td>"+
                            "<td>"+data[i].complain_content+"</td>"+
                            "<td>"+data[i].creat_time+"</td>"+
                            // "<td>"+data[i].user.name+"</td>"+
                            // "<td>"+data[i].user.phone+"</td>"+
                            "<td>"+data[i].state+"</td>"+
                            "<td>"+data[i].admin+"</td>"+
                            "<td>"+data[i].reply_time+"</td>"+
                            "<td><a href=/complain/deleteById?id=data[i].id>删除</a></td>"+
                            "</tr>"
                    }
                    $("#show_tbody").html(str)
                })
            })
        })
    </script>

运行结果及报错内容

这是查询到的数据

img

这是运行结果

img

我想要达到的结果

将需要的信息从两张表查询后的结果中取出并展示,望解答,谢谢

  • 写回答

4条回答 默认 最新

  • CSDN专家-sinJack 2022-04-01 15:19
    关注

    需要将json字符串转为数组。

    <script>
            $(function (){
                $("#btn").click(function (){
                    $.post("${pageContext.request.contextPath}/complain/findByUserId?id=${sessionScope.user.id}",function (data){
                        var str = "";
                        let arr=JSON.parse(data);
                        for (let i =0;i<arr.length;i++){
                            str+="<tr>"+
                                "<td>"+arr[i].id+"</td>"+
                                "<td>"+arr[i].complain_content+"</td>"+
                                "<td>"+arr[i].creat_time+"</td>"+
                                // "<td>"+arr[i].user.name+"</td>"+
                                // "<td>"+arr[i].user.phone+"</td>"+
                                "<td>"+arr[i].state+"</td>"+
                                "<td>"+arr[i].admin+"</td>"+
                                "<td>"+arr[i].reply_time+"</td>"+
                                "<td><a href=/complain/deleteById?id=arr[i].id>删除</a></td>"+
                                "</tr>"
                        }
                        $("#show_tbody").html(str)
                    })
                })
            })
        </script>
     
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
  • 百里长庭 2022-04-01 15:20
    关注

    你的代码快实现了,就是要把data先反序列化成json数组。如下所示:

    let list = JSON.parse(data);
    for(let i in list) {
        ....list[i].id....
        ....list[i].state....
    }
    
    评论
  • 一起随缘 2022-04-01 17:28
    关注

    将controller中6、7行对应的代码改为如下代码
    list = complainService.findByUserId(id);
    return list.toArray().toString();

    评论
  • 有问必答小助手 2022-04-04 18:56
    关注
    您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
    PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 4月12日
  • 已采纳回答 4月4日
  • 创建了问题 4月1日

悬赏问题

  • ¥15 问一下各位,为什么我用蓝牙直接发送模拟输入的数据,接收端显示乱码呢,米思齐软件上usb串口显示正常的字符串呢?
  • ¥15 Python爬虫程序
  • ¥15 crypto 这种的应该怎么找flag?
  • ¥15 设计一个时序电路,使其状态按2421(B)循环,并能自启动
  • ¥15 代码已写好,求帮我指出错误,有偿!
  • ¥15 matlab+波形匹配算法
  • ¥15 转录组分析做聚类树图时癌旁组被分到了癌组
  • ¥15 大一Python字典
  • ¥15 multisim电路设计(相关搜索:设计报告)
  • ¥15 PC-lint Plus