最近在学习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集合内的数据信息的更多相关文章

  1. ajax post方式下载后台传来的文件

    参考:http://stackoverflow.com/questions/16086162/handle-file-download-from-ajax-post $.ajax({ type: &q ...

  2. javaScript(拼写树形)+ajax请求,去后台查找数据

    第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容 //页面初始化加载菜 ...

  3. Highcharts接收后台传来的json对象值无法显示

    在highcharts接收后台传来的json对象网上已经有很多的介绍,在此不多做说明,这里想记录一笔的是在接收的json解析后的value值是String类型的,而highcharts里的data数组 ...

  4. jQuery ajax方法success()中后台传来的四种数据类型

    1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper").html(data);显示页面*/ $.ajax({ async : false, cac ...

  5. jQuery AJAX 方法 success()后台传来的4种数据

    JAVA中的四种JSON解析方式详解 jQuery AJAX 方法 success()后台传来的4种数据 1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper ...

  6. 【.net ajax显示后台返回值】

    1..net ajax显示后台返回值 <script>        $(document).ready(function () {            $("#btn&quo ...

  7. EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))

    一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...

  8. jsp实时显示后台批处理进度 - out分块,简单的长连接方式

    这两天在实现一个批处理操作,但是想让前台实时显示后台批处理进度,本想着用复杂一些的框架可以实现异步信息调用 但是鉴于是内部管理系统,且只有一两个人用到这个功能,所以做了一个简单的长连接方式的实时响应 ...

  9. Asp.Net MVC页面显示后台处理进度问题

    这个问题的背景是,用户通过浏览器上传文件或Excel数据到系统中,页面需要时时显示后台处理进度,以增强用户的体验. 在GitHub上找到一个一个项目,基本实现了这个功能,具体效果如下图 代码实现过程大 ...

随机推荐

  1. Git诞生

    很多人都知道,Linus在1991年创建了开源的Linux,从此,Linux系统不断发展,已经成为最大的服务器系统软件了. Linus虽然创建了Linux,但Linux的壮大是靠全世界热心的志愿者参与 ...

  2. umeng友盟消息推送功能集成

    umeng友盟消息推送功能集成(本人使用的是eclipse开发) 1.首先请自行观看友盟消息推送集成的API文档. 观看地址如下: http://dev.umeng.com/push/android/ ...

  3. set-matrix-zeroes当元素为0则设矩阵内行与列均为0

    题目描述 Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. c ...

  4. QTP Test ,VAPI-XP Test,LR Test 和ALM 集成远程分布式执行遇到的“access is denied ” “unspecified error”问题

    大家都知道QTP与ALM (QC的升级版)集成是最好的一个分布式执行的结合.因为毕竟QTP是一个商业软件,HP当然不会让你去跟其他的open source的工具去集成,要不他到哪里去挣钱. 有时候服务 ...

  5. sql如何通过当前日期获取上周,上上周,上上上周的起始日期(周一_周七)

    当前时间周的起始日期(以周一为例)select DATEADD(week,DATEDIFF(week,0,getdate()),0)上周起始:select dateadd(week,-1,DATEAD ...

  6. error:No buffer space available (maximum connections reached

    2015-02-02 17:49:09,035 ERROR basic.DBManager - Failded to establish the connection. com.mysql.jdbc. ...

  7. 基于Pygame写的翻译方法

    发布时间:2018-11-01   技术:pygame+easygui   概述 实现一个翻译功能,中英文的互相转换.并可以播放翻译后的内容. 翻译接口调用的是百度翻译的api接口. 详细 代码下载: ...

  8. Swift3 substring几种常用用法

    举例: " let length = str.characters.count //截取前四位 )) //截取后2位(两种方法) )) )) //截取中间4位,从第2位开始(二种方法) le ...

  9. 【RS】Amazon.com recommendations: item-to-item collaborative filtering - 亚马逊推荐:基于物品的协同过滤

    [论文标题]Amazon.com recommendations: item-to-item collaborative filtering (2003,Published by the IEEE C ...

  10. 信号量 Linux函数 semget();semctl();semop();(转)

    本文出自:http://blog.csdn.net/ta893115871/article/details/7505560 Linux进程通信之信号量 信号量(semaphore)是变量,是一种特殊的 ...