AJAX导致不一致地显示正确的内容
AJAX resulting in not consistently showing the right content
我正在做一个网站，导航时不想更改URL。所以我使用的是完全AJAX生成的内容。
链接如下：http://nestecha.fr/confi/
所以当你第一次到达页面时，一切都很好，但当你点击"新闻"或"电视"时，它会：
- 有时工作非常好，并生成我想要的所有内容
- 有时根本不起作用，会随机生成内容，有时会加载一行，有时甚至不会以正确的方式排序，有时根本不会加载任何内容
我看不出发生了什么，因为这似乎是随机的。有时有效，有时无效。
为什么？
谢谢！
以下是我认为有缺陷的一些最重要的代码：
// When we click on "News"
$('li a[href^=index]').on('click', function() {
event.preventDefault();
var $sPage = '';
$.ajax({
url: 'webservice/newsShowReel.php',
dataType: 'json'
})
.done(function (result) {
$sPage += '<div class="container">';
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1>Show Réel</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<section class="col-xs-12 text-center showreel">';
$sPage += '<div class="view view-third">';
$sPage += '<img src="'+ result['image'] +'" class="img-responsive">';
$sPage += '<div class="mask">';
$sPage += '<h2>'+ result['titre'] +'</h2>';
$sPage += '<p>'+ result['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ result['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</section>';
$sPage += '</div>';
});
$.ajax({
url: 'webservice/newsNouveautes.php',
dataType: 'json'
})
.done(function(result) {
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1>Nouveautés</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<div id="owl">';
$.each(result, function(key, resultSingle) {
$sPage += '<div class="item">';
$sPage += '<div class="viewSmall view-thirdSmall">';
$sPage += '<img src="'+ resultSingle['image'] +'" class="img-responsive">';
$sPage += '<div class="maskSmall">';
$sPage += '<h2>'+ resultSingle['titre'] +'</h2>';
$sPage += '<p>'+ resultSingle['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ resultSingle['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
$('#page').fadeOut('slow', function() {
$('#page').html($sPage).fadeIn('slow');
$("#owl").owlCarousel({
autoPlay: false, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [990,2]
});
});
});
我已经找到了问题的答案，以及为什么它不起作用。
最初，代码是这样的：
// When we click on "News"
$('li a[href^=index]').on('click', function() {
event.preventDefault();
var $sPage = '';
$.ajax({
url: 'webservice/newsShowReel.php',
dataType: 'json'
})
.done(function (result) {
$sPage = '<div class="container">';
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1>Show Réel</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<section class="col-xs-12 text-center showreel">';
$sPage += '<div class="view view-third">';
$sPage += '<img src="'+ result['image'] +'" class="img-responsive">';
$sPage += '<div class="mask">';
$sPage += '<h2>'+ result['titre'] +'</h2>';
$sPage += '<p>'+ result['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ result['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</section>';
$sPage += '</div>';
});
$.ajax({
url: 'webservice/newsNouveautes.php',
dataType: 'json'
})
.done(function(result) {
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1>Nouveautés</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<div id="owl">';
$.each(result, function(key, resultSingle) {
$sPage += '<div class="item">';
$sPage += '<div class="viewSmall view-thirdSmall">';
$sPage += '<img src="'+ resultSingle['image'] +'" class="img-responsive">';
$sPage += '<div class="maskSmall">';
$sPage += '<h2>'+ resultSingle['titre'] +'</h2>';
$sPage += '<p>'+ resultSingle['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ resultSingle['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
$('#page').fadeOut('slow', function() {
$('#page').html($sPage).fadeIn('slow');
$("#owl").owlCarousel({
autoPlay: false, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [990,2]
});
});
});
我遇到的问题是没有始终如一地显示正确的内容。此外，AJAX请求越多，显示就越不正确。问题是，同时处理多个AJAX请求会产生糟糕的结果。所以我所做的是AJAX请求，在之前的请求完成后。
以下是持续工作的新代码：
$('li a[href^=index]').on('click', function() {
event.preventDefault();
var $sPage = '';
$.ajax({
url: 'webservice/newsShowReel.php',
dataType: 'json'
})
.success(function (result) {
$sPage = '<div class="container">';
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1>Show Réel</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<section class="col-xs-12 text-center showreel">';
$sPage += '<div class="view view-third">';
$sPage += '<img src="'+ result['image'] +'" class="img-responsive">';
$sPage += '<div class="mask">';
$sPage += '<h2>'+ result['titre'] +'</h2>';
$sPage += '<p>'+ result['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ result['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</section>';
$sPage += '</div>';
$.ajax({
url: 'webservice/newsNouveautes.php',
dataType: 'json'
})
.success(function(result) {
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1>Nouveautés</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<div id="owl">';
$.each(result, function(key, resultSingle) {
$sPage += '<div class="item">';
$sPage += '<div class="viewSmall view-thirdSmall">';
$sPage += '<img src="'+ resultSingle['image'] +'" class="img-responsive">';
$sPage += '<div class="maskSmall">';
$sPage += '<h2>'+ resultSingle['titre'] +'</h2>';
$sPage += '<p>'+ resultSingle['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ resultSingle['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
});
$('#page').fadeOut('slow', function() {
$('#page').html($sPage).fadeIn('slow');
$("#owl").owlCarousel({
autoPlay: false, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [990,2]
});
});
});
相关文章：
- 当属性不一致时，如何根据属性对JS对象列表进行排序
- 日历显示不正确
- 引导程序下拉列表显示不正确
- Android和JavaScript解析API之间不一致
- Highcharts热图显示不正确
- Javascript的行为与PHP包含文件不一致
- jQuery自动完成显示不需要的动态html标记
- 对这种与document.domain和CORS相关的不一致行为的解释是什么
- 点击链接行为不一致
- Passport.js`isAuthenticated(）`不一致的行为;当它应该是真的时候是假的
- 角度方向ng显示不工作
- 与显示不一致
- localeCompare 显示使用前导变音字符对单词进行排序时不一致的行为
- 与突出显示来自不同网站的文本不一致
- Firefox 显示的行为与视频“进度”事件不一致
- AJAX导致不一致地显示正确的内容
- Google CustomSearchControl显示不一致的分页链接
- 显示/隐藏在 Jquery 图像映射上不一致的工作
- 显示不一致行为的复选框的Onclick事件处理程序
- Unicode在JS和HTML中转义时显示不一致
