如何使用ajax函数的结果创建一个html元素答案

【问题标题】：how to create an html element with the result of a ajax function如何使用ajax函数的结果创建一个html元素
【发布时间】：2018-03-02 02:28:30
【问题描述】：

我想将图像动态插入到 bxslider。我现在可以从 ajax 函数中获取结果，并在检查器的网络选项卡中显示如下：

[{nombre: "gato", imagen: "/media/1swGj9_7oxrYGA.jpg", duracion: "2000"},…]
0 : {nombre: "gato", imagen: "/media/1swGj9_7oxrYGA.jpg", duracion: "2000"}
1 : {nombre: "lay", imagen: "/media/layout_53hUG5g.png", duracion: "2000"}
2 : {nombre: "lol", imagen: "/media/IMG_194935_jkGCdbp.jpg", duracion: "2000"}

我的 HTML

<div class="wrapper">
    <ul class="bxslider" id="datos">
<!--     {% for img in imagenes %}
        <li id="images">
            <img src="{{ img.imagen.url }}" data-id="{{ img.id }}" >
        </li>
    {% endfor %} -->
    </ul>
</div>

我的 JS 看起来像这样：

<script>
    $('.bxslider').bxSlider({
        onSliderLoad: function(){
        console.log('<--------------------- se dispara el evento? ');
        $.ajax({
            url: '/image/busqueda',
            type: 'get',
            datatype: 'json',
            success : function(data){
                var html = ""
                for(var i = 0 ; i < data.lenght; i ++){
                    html += '<li><img src="'+ data[i].fields.imagen + '" data-id="' + data[i].fields.id + '"/></li>';
                }
                $('#datos').html(html);
            }
        });
      }

我无法让<li><img src="" data-id=""/></li> 显示在#datos 元素内或任何地方。

【问题讨论】：

data.lenght 应该是data.length
到目前为止，了解代码出错原因的最佳方法是使用浏览器内置的调试器。然后你可以在ajax成功函数上设置断点，逐句执行代码，查看变量的值等等。希望这会让您看到上面的错字。
@Get Off My Lawn 谢谢我已经为此苦苦挣扎了一天。现在我觉得自己很笨哈哈。
@T.J. Crowder 我仍在学习如何编程，还有很多我仍然不知道，例如如何设置断点。你能指出一个关于如何做到这一点的好读物吗？谢谢
还要确保你有一个好的编辑器，比如code.visualstudio.com

标签： javascript jquery ajax javascript-objects

【解决方案1】：

您可能需要在初始化滑块之前填写您的 html 列表：

$.ajax({
      url: '/image/busqueda',
      type: 'get',
      datatype: 'json',
      success : function(data){
          var html = ""
          for(var i = 0 ; i < data.length; i ++){
              html += '<li><img src="'+ data[i].fields.imagen + '" data-id="' + data[i].fields.id + '"/></li>';
          }
          $('#datos').append(html);
          $('.bxslider').bxSlider();
      }
});

【讨论】：