如下所示,我在加载页面时调用端点以获取一些数据并将其 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>
最佳答案
您正在干扰异步请求。一次只做一件事,继续成功
试试这个:
$('#main-body-content').load('site/pages/' + page + '.php', loadArticlesData);
等待第一个请求完成 - 然后移动
$.post('endpoint/getTags.php', {}...
进入第二次请求成功结束
关于javascript - 服务器上的 JQuery 仅间歇性地使用 .appends(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47180246/