Javascript for循环中的Ajax请求

Question

我偶然发现了一个问题，我似乎无法“谷歌”找到答案，也无法在这里找到答案，所以我正在寻求他人的帮助。

我正在创建一个轮播/滑动器。我得到了一个标签数组，为每个标签创建一个 swipe_item。在每个 swipe_item 中，我调用一个 ajax 请求来发布帖子，它接受 TAG 并返回每个给定的 TAG 最多 5 个帖子。

我想要实现的是，在为每个 TAG 创建一个 swap_item 之后，我想用它的响应数据填充每个 swip_item。就我而言，在我提供的代码中，有两个标签，所以我创建了两个 swipe_item，然后，第一个 swipe_item 返回 2 个帖子，第二个 swipe_item 返回 5 个帖子。我如何将 HTML 到每个 swipe_item 以及它在 ajax 请求中返回的帖子？

我是 Ajax/JSON 的初学者，请询问您是否需要有关此问题的更多详细信息或其他任何信息。谢谢！

代码：

var dataSupertags = {
  div_id: 'supertags',
  jsonData: superTags
};

function drawSupertags(dataSupertags) {

  var el = dataSupertags.div_id;
  var data = dataSupertags.jsonData;

  cnt = " * SUPERTAGS DEMO * ";

  cnt += '<section id="main_carousel1" class="section_style_1 carousel1">';
  cnt += '<div class="carousel1_content">';
  cnt += '<div class="posts" id="carousel1_1" style="visibility:visible;">';
  cnt += '<div class="wrapper">';
  for (i = 0; i < data.length; i++) {
    cnt += '<div class="swipe_item">';
    cnt += '<header class="swipe_list">';
    cnt += '<h1 class="active">' + '<a href="http://zyme.lrytas.lt/' + data[i].titleurl + '">' + data[i].title + '</a>' + '</h1>';
    cnt += '</header>';
    jQuery.ajax({
      dataType: 'json',
      url: 'APIURL',
      data: {
        count: 5,
        ret_fields: [
          'props.title__AS__title',
          'props.comentCount__AS__cc',
          'fb_shares',
          'props.pubfromdate_local__AS__pubdate',
          'props.href__AS__href',
          "props.media[indexof(x.type='media' for x in props.media)].otheralternate.300x200.href__AS__thumb",
        ].join(','),
        type: 'Video,Articolo,Komentaras,Foto,Recipe',
        tag_slugs: data[i].topics[0].slug,
        order: 'pubfromdate-'
      },
      success: function(response) {
        console.info(response);
        console.info(response.result.length);
        var postData;
        for (f = 0; response.result.length > 0; f++) {
          postData += '<div class="post">';
          postData += '<a href="' + response.result[f].href + '" class="img" style="background-image:url("' + response.result[f].thumb + '")"></a>';
          postData += '<div class="desc">';
          postData += '<h2><a href="#">' + response.result[f].title + ' <span>' + response.result[f].fb_shares + '</span></a></h2>';
          postData += '</div>';
          postData += '</div>';
        }
        console.log(postData);
      }
    });
    cnt += '</div>';
    console.log(data[i]);
  }
  cnt += '</div>';
  cnt += '</div>';
  cnt += '<div class="carouselNext carouselButton" onclick="carousel1_1.next()"></div>' + '<div class="carouselPrev carouselButton" onclick="carousel1_1.prev()"></div>';
  cnt += '</div>';
  cnt += '</section>';

  document.getElementById(el).innerHTML = cnt;

  if (jQuery('#carousel1_1').find('div.swipe_item').length > 0) {
    jQuery('#main_carousel1').show();
    window.carousel1_1 = new Swipe(document.getElementById('carousel1_1'), {
      speed: 400,
      auto: 5000
    });
  };

};

drawSupertags(dataSupertags);

   

用 for 循环创建的每个 swipe_item 填充帖子的正确方法是什么？

Answer 1

您正试图以一种同步方法创建 html，但这不是 AJAX 的工作方式，因为它是异步的。您必须等待您的 AJAX 请求返回某些内容，并且它们可以按任何顺序返回。

相反，尝试先构造包装器 html，然后在返回 AJAX 请求时注入每个 swipe_item。

var dataSupertags = {
  div_id: 'supertags',
  jsonData: superTags
};

function drawSupertagsWrapper(dataSupertags) {

  var el = dataSupertags.div_id;
  var data = dataSupertags.jsonData;

  cnt = " * SUPERTAGS DEMO * ";

  cnt += '<section id="main_carousel1" class="section_style_1 carousel1">';
  cnt += '<div class="carousel1_content">';
  cnt += '<div class="posts" id="carousel1_1" style="visibility:visible;">';
  cnt += '<div class="wrapper" id="' + el + '_wrapper">';
  cnt += '</div>';
  cnt += '</div>';
  cnt += '<div class="carouselNext carouselButton" onclick="carousel1_1.next()"></div>' + '<div class="carouselPrev carouselButton" onclick="carousel1_1.prev()"></div>';
  cnt += '</div>';
  cnt += '</section>';

  document.getElementById(el).innerHTML = cnt;
}

function drawSupertagsItems(dataSupertags) {
    var el = dataSupertags.div_id + '_wrapper';
    var data = dataSupertags.jsonData;
    document.getElementById(el).innerHTML = '';
    for (i = 0; i < data.length; i++) {
    jQuery.ajax({
      dataType: 'json',
      url: 'APIURL',
      data: {
        count: 5,
        ret_fields: [
          'props.title__AS__title',
          'props.comentCount__AS__cc',
          'fb_shares',
          'props.pubfromdate_local__AS__pubdate',
          'props.href__AS__href',
          "props.media[indexof(x.type='media' for x in props.media)].otheralternate.300x200.href__AS__thumb",
        ].join(','),
        type: 'type1,type2,type3',
        tag_slugs: data[i].topics[0].slug,
        order: 'pubfromdate-'
      },
      success: function(response) {
        var postData = '';
        postData += '<div class="swipe_item">';
        postData += '<header class="swipe_list">';
        postData += '<h1 class="active">' + '<a href="http://test.com/' + data[i].titleurl + '">' + data[i].title + '</a>' + '</h1>';
        postData += '</header>';
        for (f = 0; response.result.length > 0; f++) {
          postData += '<div class="post">';
          postData += '<a href="' + response.result[f].href + '" class="img" style="background-image:url("' + response.result[f].thumb + '")"></a>';
          postData += '<div class="desc">';
          postData += '<h2><a href="#">' + response.result[f].title + ' <span>' + response.result[f].fb_shares + '</span></a></h2>';
          postData += '</div>';
          postData += '</div>';
        }
        postData += '</div>';
        document.getElementById(el).appendChild(postData);
      }
    });
  }
}

Answer 2

您可以做的是为每个 swipe_item 提供一个 id（动态创建），并在一个单独的函数中调用 ajax，该函数将从您的 for 循环中调用。该函数的参数之一是您创建的 ID，其他参数是您的 ajax 调用的数据。 在成功函数中取回数据后，使用此 id 访问 swipe_item（使用闭包）并使用 append jquery 函数附加 html