AJAX导致不能始终如一地显示正确的内容

Question

我正在做一个网站，我想在导航时根本不需要更改网址。所以我使用完全AJAX生成的内容。

这里是链接：http://nestecha.fr/confi/

因此，当您第一次到达页面时，一切都很好，但是当您点击其中任何一个＆＃34;新闻＆＃34;或＆＃34; TV＆＃34;，它将：

• 有时候工作绝对正常，并按照我的意愿生成所有内容。
• 有时根本不工作，会随机生成内容，有时会加载一行，有时甚至无法以正确的方式进行排序，有时根本不会加载任何内容。

我无法看到发生了什么，因为它似乎是随机的。有时候它有效，有时它不起作用。

为什么？

谢谢！

这里有一些我认为有缺陷的最重要的代码：

// 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]

        });
    });
});

Answer 1

我找到了问题的答案，以及为什么它不起作用。

最初，代码是这样的：

// 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]

        });
    });
});