zoukankan      html  css  js  c++  java
  • 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).repliesfor(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>
  • 相关阅读:
    联合省选 2021 B 卷题解
    近期省选题思路整理
    Codeforces 1492E Almost Fault-Tolerant Database
    Codeforces 1486F Pairs of Paths
    给nginx全自动添加ssl证书以及自动续签
    宝塔面板如何用uwsgi与nginx快速部署Django项目
    solidity代币实例详解
    metaMask官方文档
    PostgreSQL windows创建用户
    odoo centos 安装odoo14
  • 原文地址:https://www.cnblogs.com/shuilangyizu/p/9650976.html
Copyright © 2011-2022 走看看