最近在学习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>