Javascript 通过ajax加载图像阵列

因此，当我使用dropzone上传图像时，我有一个数组作为响应：

{50: "/media/50/twitter cover photos for new year 2016.png", 51: "/media/51/174920-1280.png",…}

50: "/media/50/twitter cover photos for new year 2016.png"
51: "/media/51/174920-1280.png"
52: "/media/52/buy-instagram-followers.jpg"

现在我想附加以下内容：

 <div class="col-lg-2 col-md-4 col-xs-6 thumb">
       <img class="img-responsive" src=" // the values of the response array //" alt="">
       <div class="galleryremovebutton">
          <a href="/delete/ the keys / ids of the response array " class="btn btn-danger" role="button">Izbrisi sliku</a>
       </div>
 </div>

---

仅使用jQuery，您可以选择通过字符串构建DOM还是以编程方式构建DOM。无论哪种方式，它都应该是包装在jQuery中的DOM元素：

function makeThumb() {
  // $('html_for_one_thumbnail');
  // $('<div />').append('<div />')...etc;
  return elementForThumb;
}

还有一个问题需要解决：

function buildThumbnails($element, thumbs) {
  thumbs.forEach(function(thumb, thumbId) {
    var $thumb = makeThumb();
    $element.append($thumb);
    configureThumb($thumb, thumb, thumbId);
  });
}

在完成时调用，假设容器为空：

complete: function(data) {
    buildThumbnails($('#galleryimgs'), data);
}

---

除了jQuery，您是否还使用其他库来创建UI？有棱角的，击倒的，什么？使用其中一个会使这变得相当简单。不幸的是，我还不在那个阶段，我还是一名大三学生，所以还没有使用这样的前端框架。所以我在问题开始时展示的数组可以吗？我的意思是，这是我得到的回应，我不确定我如何在js代码中引用它？我也不确定这部分//$（'html_for_one_缩略图'）；//$（''）。附加（''）…等；

function configureThumb($element, thumb, thumbId) {
  $element.find('img').attr('src', thumb);
  $element.find('a').attr('href', '/delete/' + thumbId);
}

function buildThumbnails($element, thumbs) {
  thumbs.forEach(function(thumb, thumbId) {
    var $thumb = makeThumb();
    $element.append($thumb);
    configureThumb($thumb, thumb, thumbId);
  });
}

complete: function(data) {
    buildThumbnails($('#galleryimgs'), data);
}