Javascript 使用AJAX向引导转盘添加图像

我有一个像这样的旋转木马：

 <div class="col-sm-4">
        <div class="card">
            <div class="card-block">
                <div class="col-sm-12">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

                        <div class="carousel-inner" role="listbox" id="carrusel">
                            <div class="carousel-item item active">
                                <img class="d-block img-fluid" src="mysource.jpg" alt="First slide">
                            </div>
                            <div class="carousel-item item">
                                <img class="d-block img-fluid" src="mysource.jpg" alt="Second slide">
                            </div>
                            <div class="carousel-item item">
                                <img class="d-block img-fluid" src="mysource.jpg" alt="Third slide">
                            </div>
                        </div>
                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#carouselExampleIndicators" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carouselExampleIndicators" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

这个很好用。一切正常

我想用Javascript加载图像，所以我这样做了：

 $.ajax({
        type: "POST",
        async: true,
        url: '/getmoreimages/' + someid,
        dataType: 'json',
        success: function (data) {

            $.each(data.imageurl, function (key,data) {
                $('#carrusel').append($('<div class="carousel-item item active"><img class="d-block img-fluid" src='  + data + '></div>'));
            });

            console.log(data);

        },
        error: function (data) {
            console.log('Error:', data);
        }
    });

$.ajax({
类型：“POST”，
async:true，
url:'/getmoreimages/'+someid，
数据类型：“json”，
成功：功能（数据）{
$.each（data.imageurl，函数（键，数据）{
$（'#carrusel'）。追加（$（''）；
});
控制台日志（数据）；
},
错误：函数（数据）{
console.log（'错误：'，数据）；
}
});

我原以为旋转木马会根据您单击的位置添加更多图像

相反，它添加了一个静态旋转木马，对每个图像根本不起作用，从而破坏了页面

---

有什么建议吗？

如果数据是包含以下对象的数组：

{ ...,
  imageurl: String,
  ... 
}

然后尝试按如下方式修改循环：

success: function (data) {
   $.each(data, function (key, elem) {
      $('#carrusel').append($('<div class="carousel-item item active"><img class="d-block img-fluid" src='  + elem.imageurl + '></div>'));
   });

   //create carousel instance
}

成功：函数（数据）{
$。每个（数据、功能（键、元素）{
$（'#carrusel'）。追加（$（''）；
});
//创建旋转木马实例
}

---

记住，js carrousel加载程序可能需要图像已经存在于html中才能正确呈现

如果数据是包含以下对象的数组：

{ ...,
  imageurl: String,
  ... 
}

然后尝试按如下方式修改循环：

success: function (data) {
   $.each(data, function (key, elem) {
      $('#carrusel').append($('<div class="carousel-item item active"><img class="d-block img-fluid" src='  + elem.imageurl + '></div>'));
   });

   //create carousel instance
}

成功：函数（数据）{
$。每个（数据、功能（键、元素）{
$（'#carrusel'）。追加（$（''）；
});
//创建旋转木马实例
}

记住，js carrousel加载程序可能需要图像已经存在于html中才能正确呈现

如果我们假设您的“data.imageurl”单位为$。每个都是一个数组并给出正确的url，那么请尝试下面的AJAX成功函数

success: function (data){

    $.each(data.imageurl, function (key,data) {
        $('#carrusel').append($('<div class="carousel-item item"><img class="d-block img-fluid" src='  + data + '></div>'));
    });

    $('.carousel').carousel();

}

成功：函数（数据）{
$.each（data.imageurl，函数（键，数据）{
$（'#carrusel'）。追加（$（''）；
});
$（'.carousel'）.carousel（）；
}

如果我们假设您的“data.imageurl”单位为$。每个都是一个数组，并给出正确的url，那么请尝试下面的AJAX成功功能

success: function (data){

    $.each(data.imageurl, function (key,data) {
        $('#carrusel').append($('<div class="carousel-item item"><img class="d-block img-fluid" src='  + data + '></div>'));
    });

    $('.carousel').carousel();

}

成功：函数（数据）{
$.each（data.imageurl，函数（键，数据）{
$（'#carrusel'）。追加（$（''）；
});
$（'.carousel'）.carousel（）；
}

从要插入的div中删除

活动的

类如果数据是数组，请尝试修复循环，例如：

$.each（数据、函数（键、元素）{…img fluid“src='+element.imageurl+'>…}）

我的答案解决了你的问题吗？@Karlos仍然没有解决。从你插入的div中删除

活动的

类如果数据是数组，尝试修复你的循环，比如：

$。每个（数据、函数（键、元素）{…img fluid“src='+element.imageurl+'>…}）

我的回答解决了你的问题吗？@Karlos仍然没有解决。@prgrm你能添加一个jsFiidle文件吗？@prgrm你能添加一个jsFiidle文件吗？