Question

我用ajax创建了一个分页。当用户单击页码时，它调用了ajax函数。我想记住用户点击后退按钮时之前的ajax html数据。因此，我试图将哈希添加到每个页面。例如。当用户点击第3页时，网址为www.site.com/#3，第4页，网址为www.site.com/#4。到目前为止它工作正常。但是，当我单击后退按钮时，无论散列是3还是4，它总是加载倒数第二页。那么，如何确保每个散列附加到ajax的更新内容？如果网址是www.site.com/#4，它将始终加载第4页内容。 Appreicate。

$('#pagination a').click(function(e){
  e.preventDefault();
  $this = $(this).attr('href');//href is the page number
  var data = {
    action: 'post_pagination_ajax',
    post_num : $this,
  };

  $.ajax({
    url: ajax_front_gallery.ajaxurl,
    type:'POST',
    data: data,
    success: function(data){
      $('.post-content').html(data);
    }
  });

  window.location.hash = $this;
  return false;
});

Answer 1

您有点击事件，但是当您点击后退按钮时没有任何点击事件，浏览器只会从历史记录加载上一页。所以你要做的就是做一个load事件。最终结果将如下所示：

function loadContent ( url,data ) {

    $.ajax({
        url: url,
        type:'POST',
        data: data,
        success: function(data){
            $('.post-content').html(data);
        }
    });

}

$('#pagination a').click(function(e){
    e.preventDefault();

    var hash = $(this).attr('href');

    var data = {
        action: 'post_pagination_ajax',
        post_num : $(this).attr('href')
    };

    loadContent( ajax_front_gallery.ajaxurl,data );

    window.location.hash = hash;

    return false;
});

$( window ).load(function() {

    var data = {
        action: 'post_pagination_ajax',
        post_num : window.location.hash
    };

    loadContent( ajax_front_gallery.ajaxurl,data );

});

修改

即使这可以解决您的问题，我也建议您采取其他方式。由于您更改了哈希并希望基于哈希加载内容。有一个hashchange事件。所以你可以这样做：

$(window).hashchange( function(){ var data = { action: 'post_pagination_ajax', post_num : location.hash }; loadContent( ajax_front_gallery.ajaxurl,data ); }); //Trigger hash-change if page laoded with existing hash $(window).hashchange();

并且您不希望a上的任何点击事件阻止默认行为，因为在网址中更改哈希的默认行为是您想要的。

Answer 2

所以我不确定浏览器是否有一个标准处理url片段（哈希）。问题是设置哈希最初用于说明浏览器在哪里滚动（使用锚点等：http://www.w3schools.com/jsref/prop_loc_hash.asp）。因此，当您设置散列时，大多数浏览器会在历史记录中放置一个新状态，但不会使用DOM的当前状态，而是在设置散列之前使用旧状态。

但是我可以说，当我使用Javascript实现asynchrone分页时，我就像你一样熟悉它，但我检查页面加载的哈希并加载特定页面，所以你总是得到你想要的结果。

我认为这是Google搜索的工作方式，而且这是我的想法的来源。

如何确保hashtag附加了ajax更新的内容？

2 个答案: