Question

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

我正在制作旋转木马/傻瓜。我得到了一系列TAGS，每个TAG我创建了一个swipe_item。在swipe_item的每一个内部，我都会调用一个ajax帖子请求，它会接收TAG，每个TAG最多返回5个帖子。

我想要实现的是，在为每个TAG创建swap_item之后，我想用每个swip_item填充其响应数据。在我的情况下，在我提供的代码中有两个标签，因此我创建了两个swipe_items，然后，第一个swipe_item返回2个帖子，第二个swipe_item返回5个帖子。如何使用它在ajax请求中返回的帖子的每个swipe_item的HTML？

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

代码：

＆＃13;

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

＆＃13;

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

Answer 1

您正在尝试在一个同步方法中创建html，但这不是AJAX的工作原理，因为它是异步的。你必须等待你的AJAX请求返回一些东西，他们可以按任何顺序返回。

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

<div>

  <header>
    <h1> Games Collection </h1></header>

  <nav>

    <ul>
      <li><a href="index.htm"> Home </a></li>
      <li><a href="casual.htm"> Casual </a></li>
      <li><a href="shooter.htm"> Shooter </a></li>
      <li><a href="platformer.htm"> Platformer </a></li>
      <li><a href="purchase.htm"> Purchase Games </a></li>
    </ul>

  </nav>

  <article>
    <h1> Purchase Games </h1>
    <form name="myForm">
      First Name:
      <br>
      <input type="text" name="firstname">
      <br>
      <br> Last Name
      <br>
      <input type="text" name="lastname">
      <br>
      <br>

      <div class="dropdown">
        <button type="button" onclick="myFunction()" class="dropbtn"> Select Game Code </button>
        <div id="myDropdown" class="dropdown-content">
          <a href="#"> FIFA </a>
          <a href="#"> FORZA </a>
          <a href="#"> POOL </a>
          <a href="#"> MINE </a>
          <a href="#"> PES </a>
          <a href="#"> CODMW </a>
          <a href="#"> TITAN </a>
          <a href="#"> TITAN2 </a>
          <a href="#"> BATTLE </a>
          <a href="#"> PLANT </a>
          <a href="#"> INSIDE </a>
          <a href="#"> TERRA </a>
          <a href="#"> MANY </a>
          <a href="#"> MARIO </a>
          <a href="#"> RYMAN </a>
        </div>
      </div>
      <br>
      <button type="submit" value="Confirm" class="confirmbtn" onclick="submitData()"></button>
      <br>
      <br>
    </form>

    <textarea rows="10" cols="50" id="myTextArea">
      Once you purchase an item this is where it will appear
    </textarea>
  </article>

  <footer>
    <h3> Created by Michael Shepherd (Use this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter" </h3></footer>

Answer 2

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

Javascript for循环中的Ajax请求

2 个答案: