Javascript for循环中的Ajax请求

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

我正在创建一个旋转木马/游泳池。我得到了一个标签数组，我为每个标签创建了一个滑动项。在我调用的每个swipe_项中都有一个ajax帖子请求，它接收标签并返回每个标签最多5篇帖子

我想实现的是，在为每个标记创建一个swap_项之后，我想用它的响应数据填充每个swip_项。在我的例子和我提供的代码中，有两个标记，因此我创建了两个滑动项，然后，第一个滑动项返回2个帖子，第二个滑动项返回5个帖子。如何将HTML与它在ajax请求中返回的帖子一起发送到每个swipe_项目

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

代码：

var数据超级标记={
div_id:'超级标签'，
jsonData：超级标记
};
函数drawSupertags（dataSupertags）{
var el=dataSupertags.div_id；
var data=dataSupertags.jsonData；
cnt=“*超级标签演示*”；
cnt+=''；
cnt+=''；
cnt+=''；
cnt+=''；
对于（i=0；i0；f++）{
postData+=''；
postData+=''；
postData+=''；
postData+=''；
postData+=''；
postData+=''；
}
console.log（postData）；
}
});
cnt+=''；
console.log（数据[i]）；
}
cnt+=''；
cnt+=''；
cnt+=''+''；
cnt+=''；
cnt+=''；
document.getElementById（el）.innerHTML=cnt；
if（jQuery（'#carousel1_1'）.find（'div.swipe_item'）.length>0）{
jQuery（'#main_carousel1'）.show（）；
window.carousel1_1=新刷卡（document.getElementById（'carousel1_1'）{
速度:400,，
汽车：5000
});
};
};
drawSupertags（数据SuperTags）；

您可以为每个滑动项提供一个id（动态创建），并在单独的函数中进行ajax调用，该函数将从for循环中调用。函数的一个参数是您创建的ID，另一个参数是ajax调用的数据。

---

一旦您在success函数中获得了数据，就可以使用这个id访问swipe_项（利用闭包），并使用

append

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

相反，首先尝试构建包装器html，然后在返回AJAX请求时注入每个滑动项

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);
      }
    });
  }
}

var数据超级标记={
div_id:'超级标签'，
jsonData：超级标记
};
函数drawSupertagsWrapper（dataSupertags）{
var el=dataSupertags.div_id；
var data=dataSupertags.jsonData；
cnt=“*超级标签演示*”；
cnt+=''；
cnt+=''；
cnt+=''；
cnt+=''；
cnt+=''；
cnt+=''；
cnt+=''+''；
cnt+=''；
cnt+=''；
document.getElementById（el）.innerHTML=cnt；
}
函数drawSupertagsItems（dataSupertags）{
var el=dataSupertags.div_id+“_wrapper”；
var data=dataSupertags.jsonData；
document.getElementById（el.innerHTML=''；
对于（i=0；i0；f++）{
postData+=''；
postData+=''；
postData+=''；
postData+=''；
postData+=''；
postData+=''；
}
postData+=''；
document.getElementById（el）.appendChild（postData）；
}
});
}
}

try

ajax

property

async=false

@AmeyaDeshpande嘿，谢谢你的回答，但似乎没有什么帮助。它现在做的是，在第一个标记中循环一次，返回两个帖子，然后中断，对于第二个滑动项，我得到一个未定义的错误作为响应。@AmeyaDeshpande从来没有这样做过。如果你能创建一个伪superTags对象以及问题cz，它的undefined@RoryMcCrossan是的，挂UI是一种不好的做法，但我想如果没有其他选择，这会有所帮助。看起来，Lintu，这是个好主意，我会尝试一下并报告！你好@Joe，你的回答对我走上正轨很有帮助！尽管如此，我还是遇到了一些问题。现在，在执行for循环时，ajax响应中出现了一个未定义的错误。我用响应记录控制台，它是r