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

最近在学习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;//如果前方代码取值不称就用这个：jQuery.parseJSON(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>

巴特西

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

最新文章

热门文章