jquery - 为什么在 jquery 中刷新加载的页面导致只加载页面

Question

我有 default.php 并且我正在将另一个页面 letter.php 加载到 default.php

使用jquery的load方法如下

 $('div.banner a').click(function(event) {
    event.preventDefault();
            var page = $(this).attr('href');
            $('.banner').load(page +'.php');
            return false;
        });

它的加载很好，但问题是当我在加载页面后按 f5 时，default.php 文件正在显示而没有加载的内容

Answer 1

您需要记住刷新页面时应该加载哪个页面。

您可以使用 cookie 或任何本地存储。

使用 jquery cookie 插件：

$('div.banner a').click(function(event) {
    event.preventDefault();
            var page = $(this).attr('href');
            $.cookie("pageToLoad",page);
            $('.banner').load(page +'.php');
            return false;
        });

刷新页面时：

$(document).ready(function(){
  if ($.cookie("pageToLoad").length){
    $('.banner').load($.cookie("pageToLoad") +'.php');
}

});

Answer 2

那是因为这就是 AJAX 的工作方式。它为页面本身加载它，但是一旦你刷新它，你使用 ajax 加载的每个页面都消失了。我已经编写了这个简单的函数，它在 URL 中添加了一个主题标签。然后，当您使用主题标签刷新页面时，它会启动相同的 AJAX 事件。

function loadfile(link, target){
    window.location.hash = '!'+ link;

    target.load(link);
}

你像这样使用它：

$(document).ready(function(){
    if(window.location.hash != ''){
        var hash = window.location.hash;
        loadfile(hash.replace('#!', ''), $('.banner'));
    }

    $('div.banner a').click(function(event) {
        event.preventDefault();

        loadfile($(this).attr('href'), $('.banner'));
    });
});

<div class="banner">
    Dear potato,
    Blablabla. Lorum ipsum dolor sit amet, <a href="letter.php">letter</a>.

    Love,
    Carrot.
</div>

或者，您也可以尝试使用history.pushState()而不是使用主题标签，但这是新事物，并非每个用户都支持它。

Answer 3

       use the url hashing technique, as shown below

    $(document).ready(function(){   
    $(init);                          

    function init() {    
      ajax_page_handler();   
      page_load($(window.location).attr("hash"));             
    }

    function page_load($href)  
    {  
       if($href != undefined && $href.substring(0, 1) == '#')   
       {  
           $('.banner').load($href.substring(1));               
       }  
    }        
    function ajax_page_handler()
    {   
       $(window).bind('hashchange', function () 
       {                    
           $href = $(window.location).attr("hash");  
       page_load($href);        
         });   
    }   
   });