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要相互对应

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_39967349/article/details/78835279

运用Ajax通过select下拉框能得到数据

大伙应该在开发中遇到过这种情况,就是通过下拉框选择要显示的内容。如下图所示: 在没用到ajax技术时,我们可以使用两种方法来解决,一种就是选择后再次获得下拉框的数据,和显示的数据一起反映在页面上,这是...
  • rickhunterchen
  • rickhunterchen
  • 2006-08-10 09:37:00
  • 4697

使用ajax从数据库动态加载下拉框(select)数据,可编辑下拉框。

  • x2570799116
  • x2570799116
  • 2017-03-29 22:34:46
  • 6460

jquery ajax遍历list数据

jquery ajax前端调用脚本 function shijiao(){ $("#dataList").empty(); var agentName = $("#agent").val(); ...
  • u010786200
  • u010786200
  • 2017-04-21 17:15:18
  • 2538

Ajax遍历数据的误区(转)

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

动态从后台<em>获取数据</em>实现搜索<em>下拉框</em>

Jquery+<em>Ajax</em>实现Select动态定数据 使用select实现数据库动态查询 javascript实现两个select选择框内容动态绑定 Select<em>下拉框</em>动态<em>获取数据</em>,并触发事件 上传资源 中单...
  • 2018年04月17日 00:00

JQUERY 通过AJAX获取数据并绑定下拉框

function BindDrpList(para) {             // var sid = document.getElementById("hdn_Id").value;    ...
  • nan2008zzu
  • nan2008zzu
  • 2014-11-24 13:36:26
  • 2328

jquery ajax json 数据 遍历

后台返回的数据 : {"receiveList":[{"receive_dept_id":"1007873","receive_dept_desc":"区公司领导","guid":"20161123...
  • forever_yours
  • forever_yours
  • 2016-11-24 13:14:17
  • 3016

ajax数据提交 遍历显示例子

保存联系人    //常用联系人添加     $(".saveAssPersonnelUser").click(function(){      var org3_ids=$("#org3_i...
  • kunkun378263
  • kunkun378263
  • 2015-03-07 16:40:02
  • 4434

Jquery解决下拉框数据动态获取

废话不多说,直接上源码: select.jsp ">
  • u012377333
  • u012377333
  • 2016-01-21 14:39:16
  • 5767

通过ajax返回的json数据,给下拉框默认选中显示(给下拉框赋的选中值)

//编辑数据渲染 $("#zh_update").click(function(){ if(checknum==1){ $(".zh_update")....
  • MZ199290
  • MZ199290
  • 2017-06-20 16:13:06
  • 1828
收藏助手
不良信息举报
您举报文章:Ajax遍历数据的误区
举报原因:
原因补充:

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