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>
     
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 请问在阿里云服务器中怎么利用数据库制作网站
  • ¥60 ESP32怎么烧录自启动程序
  • ¥50 html2canvas超出滚动条不显示
  • ¥15 java业务性能问题求解(sql,业务设计相关)
  • ¥15 52810 尾椎c三个a 写蓝牙地址
  • ¥15 elmos524.33 eeprom的读写问题
  • ¥15 使用Java milo连接Kepserver服务端报错?
  • ¥15 用ADS设计一款的射频功率放大器
  • ¥15 怎么求交点连线的理论解?
  • ¥20 软件开发方法学习来了