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

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

<?php
  $count = $this->helper('checkout/cart')->getSummaryCount();  //get total items in cart
  $total = $this->helper('checkout/cart')->getQuote()->getGrandTotal(); //get total price
  if($count==0)
  {
    echo $this->__('<a href="/checkout/cart" class="cartgo">(0 ITEMS)</a>',$count);
  }
  if($count==1)
  {
    echo $this->__('<a href="/checkout/cart" class="cartgo">(1 ITEM)</a>',$count);
  }
  if($count>1)
  {
    echo $this->__('<a href="/checkout/cart" class="cartgo">(%s ITMES)</a>',$count);
  }
  echo $this->__('', $this->helper('core')->formatPrice($total, false));
?>

Answer 2

尝试以下方法

$(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');}

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

2 个答案: