javascript - 服务器上的 JQuery 仅间歇性地使用 .appends()

Question

如下所示，我在加载页面时调用端点以获取一些数据并将其 append 到 div。在本地主机上它工作得很好，但在服务器上它只能间歇性地工作...当我查看开发工具时，网络选项卡表明 $.post 可以工作并返回数据...但 append 不能。

我想知道这是否与 $.post 在 html 渲染之前完成有关，因此没有要 append 的 div...但不确定如何验证或修复此问题。我尝试将 html 页面中的脚本移至 close-body 标记之前，以确保首先呈现 html。我还确保在调用 $(Document).ready 之前在 JS 中定义函数。

要看到它无法实时运行... www.everythingproduct.com - 如果您尝试多次单击博客页面，您会发现有时它会挂起...

$(document).ready(function() {

  var page = 'blog-articles';
  $('#main-body-content').load('site/pages/' + page + '.php');
  loadArticlesData();

  $.post('endpoint/sendEvent.php', {
    userID: '<?php echo $uid; ?>',
    eventType: "pageView",
    currentURL: window.location.href,
    referer: '<?php echo $referer; ?>'
  });

});

function loadArticlesData() {
  $('#cover').show();
  $.post('endpoint/getArticles.php', {
    type: "All"
  }, function(result) {
    var data = result;
    $.each(data, function(i, l) {
      $('#articles').append(
        '<a target="_blank" href="' + l.link + '">' +
        '<div value="' + l.id + '" class="article">' +
        '<div class="img">' +
        '<img src="img/' + l.img + '" height="50px">' +
        '</div>' +
        '<div class="article-content">' +
        '<h2>' + l.title + '</h2>' +
        '<span class="description-text">' + l.description + '... <span style="font-style: italic; color: #888;">See more</span></span>' +
        '</div>' +
        '</div>' +
        '</a>'
      );
    });
    $('#cover').fadeOut("slow");
  });

  $.post('endpoint/getTags.php', {}, function(result) {
    var data = result;

    $.each(data, function(i, l) {
      $('#tags').append(
        '<span value="' + l + '" class="tag-word">' + l + '</span> '
      );
    });
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover"></div>
<div class="body">
  <div class="body-container">
    <div class="body-left">
      <div style="text-align: left; padding-left: 20px;">
        <h1 style="font-weight: normal;">Blog Article Database</h1>
      </div>
      <div id="articles" class="articles"></div>
    </div>
    <div class="body-right">
      <div class="filter-panel">
        <h3>Browse (A-Z)</h3>
        <div id="tags" class="tags">
          <span style="background: #fff; color: #0c7bce;" value="ALL" class="tag-word">ALL</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您正在干扰异步请求。一次只做一件事，继续成功

试试这个:

$('#main-body-content').load('site/pages/' + page + '.php',  loadArticlesData); 

等待第一个请求完成 - 然后移动

$.post('endpoint/getTags.php', {}...

进入第二次请求成功结束