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

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

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

前台ajax接收代码如下:

  1. var mid;
  2. function LookReply(mid){
  3. $.ajax({
  4. dataType:"json",
  5. type:"POST",
  6. url:"../reply/findReply.action",
  7. data:{mid:mid},
  8. success:function(data){
  9. var arr=data.replies;//如果前方代码取值不称就用这个:jQuery.parseJSON(data).replies;
  10. for(var i=0;i<data.replies.length;i++){
  11. var name=arr[i].replier;
  12. var content=arr[i].reply;
  13. var time=arr[i].time;
  14. $('#reply_'+mid).prepend("<dl style='background-color:pink;'><dt>"+content+"</dt><dd>回复者:"+name+"</dd><dd>回复时间:"+time+"</dd></dl>");
  15. }
  16. },error:function(data){
  17. alert(系统错误);
  18. }
  19. });
  20. }

注意:

  1. var arr=data.replies;

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

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

  1. $('#reply_'+mid)

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

html代码如下:

  1.   <c:forEach items="${messages }" var="message">
  2. <div>
  3. <div>
  4. <p><font color="red">${message.content }</font></p>
  5. </div>
  6. <div><button onclick="LookReply(${message.mid })">查看回复</button></div>
  7. <div id="reply_${message.mid }"></div>
  8. </div>
  9.  
  10. <br>
  11. </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. 使用gradle的application插件进行Spring-boot项目打包

    1:在build.gradle中增加以下配置 fat jar并不总是一个合适的选择,比如需要依赖跟jar分离,使用gradle的application插件就可以做到. 在GradleTest项目中,b ...

  2. JAVA设计模式——第 1 章 策略模式【Strategy Pattern】(转)

    刘备要到江东娶老婆了,走之前诸葛亮给赵云(伴郎)三个锦囊妙计,说是按天机拆开解决棘手问题,嘿,还别说,真是解决了大问题,搞到最后是周瑜陪了夫人又折兵呀,那咱们先看看这个场景是什么样子的. 先说这个场景 ...

  3. Java并发容器之CopyOnWriteArraySet与ConcurrentSkipListSet

    一:CopyOnWriteArraySet CopyOnWriteArraySet底层其实是通过CopyOnWriteArrayList来实现的,通过组合一个CopyOnWriteArrayList作 ...

  4. 【Linux】使用cat命令创建文本文件

    在Linux界面输入 Linux:/usr/test # cat >test01.sh 接着按回车,输入内容:"echo hello world !" 回车后按 ctrl+d ...

  5. 批处理转exe工具(Quick Batch File Compiler )|bat格式化exe

    看到的,就是回忆.历史总是那么漫不经心,走完一生.留下可以记忆的脚本.... 对于window编写的bat脚本,想加密吗? 你所想的,前辈们基本上都有产出成果.所以在这个开源.共享.进步的互联网时代. ...

  6. 实现两个Mysql数据库同步

    一.     概述  MySQL从3.23.15版本以后提供数据库复制(replication)功能,利用该功能可以实现两个数据库同步.主从模式.互相备份模式的功能.本文档主要阐述了如何在linux系 ...

  7. 【CI】CN.一种多尺度协同变异的微粒群优化算法

    [论文标题]一种多尺度协同变异的微粒群优化算法 (2010) [论文作者]陶新民,刘福荣, 刘  玉 , 童智靖 [论文链接]Paper(14-pages // Single column) [摘要] ...

  8. Linux下网卡混杂模式设置和取消

    工作中发现一个网卡工作状态不对了,查看了一下,发现这个网卡和正常工作的网卡  信息不一样,它显示的居然是混杂模式,而正常工作的是  running 模式 ,所以来了解下混杂模式怎么取消... 下文来自 ...

  9. memcached全面剖析--5. memcached的应用和兼容程序

    我是Mixi的长野.memcached的连载终于要结束了.到上次为止,我们介绍了与memcached直接相关的话题,本次介绍一些mixi的案例和实际应用上的话题,并介绍一些与memcached兼容的程 ...

  10. [转]expect实现ssh自动交互

    shell脚本实现ssh自动登录远程服务器示例: #!/usr/bin/expect spawn ssh root@192.168.22.194 expect "*password:&quo ...