Ajax遍历数据的误区

2017年12月18日 17:32:54

举个例子电商平台对商品的评价

评价完成索要展示的数据

  1. 评价内容
  2. 上传多张的图片

注:这里我们去到的数据是如下图
这里写图片描述

我们遍历数据同时,还要对每条数据里面的imgs进行遍历,代码如下:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/main.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<style>
    img{
        width: 50px;
        height: 50px;
    }
</style>
<body>
    <span pj=1>好评</span>
    <span pj=2>中评</span>
    <span pj=3>差评</span>
    <div class="aa">
        <div class="bb" style="border-bottom: 1px solid red">
            <p>asdasd</p>
            <p>11</p>
            <div id="cc">
                <img src="" alt="">
            </div>
        </div>
    </div>
</body>
</html>
<script>
    $("span").click(function () {
        var pj = $(this).attr("pj")
        $(".aa").html("")
        $.ajax({
            url:"__CONTROLLER__/ajaxchuli",
            data:{pj:pj},
            type:"POST",
            dataType:"JSON",
            success: function(data){
                console.log(data)
                for (var i = 0; i < data.length; i++) {
                    var id = data[i]["id"];
                    var content = data[i]["content"];
                    var pj = data[i]["pj"];
                    $(".aa").append(
                        '<div class="bb" style="border-bottom: 1px solid red">'+
                            '<p>'+content+'</p>'+
                            '<p>'+pj+'</p>'+
                            "<div id='cc"+id+"'>" + "</div>"+
                        '</div>'
                    )
                    for (var j = 0; j < data[i]['imgs'].length; j++) {
                        $("#cc"+id).append(
                            '<img id="" src="__ROOT__/Uploads/' + data[i]['imgs'][j] + '" alt="">'
                        )
                    }
                }
            }
        })
    })
</script>



补充一下:在遍历每一项数据中的imgs时插入的父级id要相互对应

Ajax遍历数据的误区(转)

举个例子电商平台对商品的评价 评价完成索要展示的数据 评价内容上传多张的图片 注:这里我们去到的数据是如下图  我们遍历数据同时,还要对每条数据里面的imgs进行遍历,代码...
  • GB15600279399
  • GB15600279399
  • 2017年12月25日 22:41
  • 136

web前端之Ajax遍历json后对每一条数据进行相应的修改和删除

web前端之ajax遍历json后对每一条数据进行相应的修改和删除$.ajax({ url: "/business/findpersons.json", dataType: "json...
  • u014785563
  • u014785563
  • 2016年11月25日 13:38
  • 1206

ajax遍历json数据(实现迭代效果),显示在网页

Dao层:查询全部用户 //查询所有用户 public List findAllModel() { // TODO Auto-generated method stub return (Li...
  • Bianhua_c
  • Bianhua_c
  • 2017年11月24日 21:19
  • 274

jquery遍历ajax返回的json数据

jquery遍历ajax返回的json数据 我们以前在前端遍历ajax拿到的数据一般都是用for或其他方式遍历,这样做麻烦且费事,效率不高,下面提供一个函数,只需把此函数放到jquery文件中,调用函...
  • codercwm
  • codercwm
  • 2016年05月17日 00:11
  • 2810

ajax数据返回进行遍历

后台返回的数据 : {"receiveList":[{"receive_dept_id":"1007873","receive_dept_desc":"区公司领导","guid":"201611...
  • OLiver_web
  • OLiver_web
  • 2017年07月15日 21:51
  • 501

使用注解springmvc配合jsp/ajax/json,实现简单的jsp遍历后台数据

要实现的预览:
  • ge1mina023
  • ge1mina023
  • 2016年01月29日 22:50
  • 473

ajax接收遍历处理json格式数据

ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面。 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做da...
  • qq_26400953
  • qq_26400953
  • 2017年08月08日 21:41
  • 278

ajax接收遍历处理json格式数据

ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面。 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的j...
  • qq_36948778
  • qq_36948778
  • 2017年06月07日 17:57
  • 298

ajax回调json数据遍历取出数据

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意...
  • jaryle
  • jaryle
  • 2017年11月21日 16:26
  • 168

微信小程序ajax实现请求服务器数据,模版遍历数据

昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求。微信小程序文档地址:https://mp.weixin.qq.com/wiki?t=resource/res...
  • xiaoshihoukeshuaiL
  • xiaoshihoukeshuaiL
  • 2016年11月23日 10:45
  • 22651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax遍历数据的误区
举报原因:
原因补充:

(最多只允许输入30个字)