Ajax接收并显示后台传来的list集合内的数据信息

本文链接：https://blog.csdn.net/bin929/article/details/80278987

本文介绍如何使用Ajax与SpringMVC实现留言系统的功能，重点在于如何从前端接收后台传来的list集合数据，并将其正确显示出来。文章详细解释了后端数据处理流程与前端JavaScript代码的具体实现。

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

最近在学习Ajax做一个留言系统的时候碰到需要将list集合从后台传到前台ajax接收并显示的情况，在网上搜了很多，但很多情况都不是和我遇见的情况一样的，现在，直接贴出我的问题及解决方法。
后台代码：

@RequestMapping(value="/findReply")
    @ResponseBody
    public Map<String, Object> findReply(int mid){
        System.out.println("mid:"+mid);
        List<Reply> replies=replyService.findReply(mid);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("replies", replies);
        return map;
    }

后台是springMVC，将查询的集合replies放进map，返回到前台。

前台ajax接收代码如下：

var mid;
    function LookReply(mid){
        $.ajax({
            dataType:"json",
            type:"POST",
            url:"../reply/findReply.action",
            data:{mid:mid},
            success:function(data){
                var arr=data.replies;
                 for(var i=0;i<data.replies.length;i++){
                    var name=arr[i].replier;
                    var content=arr[i].reply;
                    var time=arr[i].time;
                    $('#reply_'+mid).prepend("<dl style='background-color:pink;'><dt>"+content+"</dt><dd>回复者："+name+"</dd><dd>回复时间："+time+"</dd></dl>");
                }  
            },error:function(data){
                alert(系统错误);
            }
        });
    }

注意：

var arr=data.replies;

这部分代码是，后台传出的是map，并不是直接的list集合replies，list集合replies是放进map集合内传出的，所以data接收的是map，需要显示的是list集合replies内的信息，所以在前台新new一个对象接收map内的replies集合，来代替replies。

信息的获取注意for循环内的代码，当然也可以使用each进行循环遍历。

$('#reply_'+mid)

这个地方是和下边的html代码结合使用的，下边的html代码是循环输出，所以使用信息的id动态为div赋予id名。

html代码如下：

    <c:forEach items="${messages }" var="message">
            <div>
                <div>
                    <p><font color="red">${message.content }</font></p>
                </div>
                <div><button onclick="LookReply(${message.mid })">查看回复</button></div>
                <div id="reply_${message.mid }"></div>
            </div>

                <br>
        </c:forEach>