防止多个 Ajax 请求（使用 pushstate 进行分页）

Question

我在使用 HTML API Pushstate 进行 ajax 分页时遇到了问题。

所以，这是我的代码：

<ul class="small">
    <li>
        <p>a</p>
    </li>
</ul>

<ul class="paging">
    <li><a href=/page2>2</a></li>
    <li><a href=/page3>3</a><li>
    <li><a href=/page4>4</a><li>
</ul>


$(document).ready(function() {
    if (window.history && history.pushState) {
        historyedited = false;
        $(window).on('popstate', function(e) {
            if (historyedited) {
                loadProducts(location.pathname + location.search);
            }
        });
        doPager();
    }
});

function doPager() {
    $('.paging li a').click(function(e) {
        e.preventDefault();
        loadProducts($(this).attr('href'));
        history.pushState(null, null, $(this).attr('href'));
        historyedited = true;
    });
}

function loadProducts(url) {
    $('.small li').empty().load(url + ' .small', function() {
        doPager();
    });
}

第一次单击时效果很好，但是当我单击 2、3 或 4 次时出现问题。它发出多个 Ajax 请求，事情变得更糟。我的代码有什么问题？

Answer 1

试试下面的方法

$(document).ready(function() {
if (window.history && history.pushState) {
    historyedited = false;$(window).on('popstate', function(e) {
        if (historyedited) {
            loadProducts(location.pathname + location.search);
        }
    });
}
$('.paging li a').click(function(e) {
    e.preventDefault();
    loadProducts($(this).attr('href'));
    history.pushState(null, null, $(this).attr('href'));
    historyedited = true;
});});


function loadProducts(url){
$('.small li').empty().load(url + ' .small');}

Answer 2

点击新页面时，您必须先取消之前的请求。您不能为此使用 .load() ，因此最好使用 $.ajax 。你可以这样做：

$(document).ready(function() {
    $('.paging li a').click(function(e) {
        e.preventDefault();

        // Cancel previous request if there is one
        if(typeof xhr !== 'undefined') {
            xhr.abort();
        }

        // Do the new request
        var xhr = $.ajax({
            url: $(this).attr('href') + '.small',
            success: function(data) {
                 $('.small li').html(data);
                 doPager();
            }
        });
    });
});

Answer 3

如何在分页中应用pushstate或replace状态，并通过ajax和jquery和php进行过滤

这是我的过滤和分页代码

    function filter_data(page)
{
    $('.filter_data').html('<div id="loading" style="" ></div>');
    var action = 'fetch_data';
    var minimum_price = $('#hidden_minimum_price').val();
    var maximum_price = $('#hidden_maximum_price').val();
   
   
    var brand = get_filter('brand');
    var ram = get_filter('ram');
    var storage = get_filter('storage');
    $.ajax({
        url:"fetch_data.php",
        method:"POST",
        data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price,page:page,brand:brand, ram:ram, storage:storage},
        success:function(data){
            $('.filter_data').html(data);
        }
    });
}

function get_filter(class_name)
{
    var filter = [];
    $('.'+class_name+':checked').each(function(){
        filter.push($(this).val());
    });
    return filter;
}

$('.common_selector').click(function(){
    filter_data();
});

$('#price_range').slider({
    range:true,
    min:1990,
    max:2022,
    values:[1990, 2022],
    step:1,
    stop:function(event, ui)
    {
        $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
        $('#hidden_minimum_price').val(ui.values[0]);
        $('#hidden_maximum_price').val(ui.values[1]);
        filter_data();
    }
});
  $(document).on('click', '.pagination_link', function(){
  $('html, body').animate({
                scrollTop: $("#withref").offset().top
            }, 1000);
       var page = $(this).attr("id");  
       filter_data(page);  
  });  

});

所以它是过滤器和分页的 ajax 代码，请帮助我解决如何应用 pushstate 或替换状态，以便当我返回时无法删除 ajax 过滤器