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

时间:2013-07-18 11:04:26

标签: jquery ajax

我有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文件,但不显示已加载的内容

3 个答案:

答案 0 :(得分:0)

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

您可以使用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;
        });

刷新de页面时:

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

});

答案 1 :(得分:0)

那是因为这就是AJAX的工作原理。它为页面本身加载它,但是一旦你刷新它,你使用ajax加载的每个页面都消失了。我已经写了这个简单的函数,它会在URL中添加一个hashtag。然后,当您使用#标签刷新页面时,它会启动相同的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()而不是使用主题标签,但这是新的,并非每个用户都支持它。

答案 2 :(得分:0)

       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);        
         });   
    }   
   });