Question

我是ajax wordpress的新手，我用ajax显示帖子，但现在我有问题我想用ajax显示上一篇文章，意味着我用ajax显示帖子，当用户点击一个帖子时它显示，当点击浏览器后退按钮然后以前的帖子没有显示。任何人都告诉我如何用浏览器后退按钮显示以前的wordpress ajax帖子。这是我用过的代码

 <script type="text/javascript">
    jQuery(document).ready(function($) {
    jQuery(".ajaxclick").click(function() {
    var post_id1 = $(this).parent("li").attr("id");
    var pageurl = $(this).attr('href');
    alert(pageurl);
    var ajaxURL = '<?php echo get_admin_url(); ?>admin-ajax.php';
    $.ajax({
    url: ajaxURL,
    type: 'POST',
    beforeSend: function() {
    $("#loading-animation").hide();
    $("#ajaxloader").show();
    },
    complete: function() {
    $("#loading-animation").show();
    $("#ajaxloader").hide();
    },
    data:   {
    action: 'load-content',
    post_id: post_id1 
    },
    success: function(response) {
    jQuery("#loading-animation").addClass('loadingstyle');
    jQuery("#loading-animation").html(response);
    return false;
    }

    });
    });
    });
    </script>

Answer 1

使用哈希#，

$(function(){
   if(location.hash === 'somepage'){
     //do ajax again automatically here
   }
 });

并在成功时添加哈希：

success: function(response) {
jQuery("#loading-animation").addClass('loadingstyle');
jQuery("#loading-animation").html(response, function(){
   location.hash = 'somepage';//<<-- must be identic with loaded page and same with above
});

祝你好运！

Answer 2

有一个jquery插件似乎有效地管理

这个jQuery插件通过一个非常基本的可收藏的#hash历史记录跨浏览器的HTML5 window.onhashchange事件。

http://benalman.com/projects/jquery-hashchange-plugin/ https://stackoverflow.com/a/173075/1061871

html5解决方案：https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate

Answer 3

您好已经解决了这个问题，现在ajax帖子工作正常，浏览器后退按钮和转发按钮，此代码用于ajax帖子加载ajax后，然后此代码将用于显示浏览器后退按钮这里是代码：

    // Bind an event to window.onhashchange that, when the hash changes, 
$(window).on('hashchange', function(){
//check if hash tag exists in the URL
if(window.location.hash) {
var ajaxURL1 = '<?php echo get_admin_url(); ?>admin-ajax.php';
//set the value as a variable, and remove the #
var post_id1= window.location.hash.substring(1);
$.ajax({
url: ajaxURL1,
type: 'POST',
cache:false,
data:   {
action: 'load-content',
post_id: post_id1
},
success: function(response) {
jQuery("#loading-animation").addClass('loadingstyle');
jQuery("#loading-animation").html(response);
return false;
}   
});
}
else
{
window.location="http://203.134.217.4/testingwp/";
}
});

用浏览器后退按钮获取ajax以前的wordpress帖子

3 个答案: