Javascript 浏览器刷新和后退按钮会导致基于AJAX的模板出现问题_Javascript_Jquery_Ajax_Browser History_History.js

Javascript 浏览器刷新和后退按钮会导致基于AJAX的模板出现问题

javascript jquery ajax

Javascript 浏览器刷新和后退按钮会导致基于AJAX的模板出现问题,javascript,jquery,ajax,browser-history,history.js,Javascript,Jquery,Ajax,Browser History,History.js,我对jquery和堆栈溢出都是新手。我希望您能提供一些简单的帮助。我尝试了一些提出的解决方案，但都不适用于我的情况我试图使用History.js插件来修复后退按钮功能，这似乎不适用于Ajax。问题是我无法正确处理插件，因此当我更改状态时，URL会更改，如果我尝试刷新初始模板，则会消失以下是脚本： <script> $(function () { // Prepare var History = window.History; // Note

我对jquery和堆栈溢出都是新手。我希望您能提供一些简单的帮助。我尝试了一些提出的解决方案，但都不适用于我的情况

我试图使用History.js插件来修复后退按钮功能，这似乎不适用于Ajax。问题是我无法正确处理插件，因此当我更改状态时，URL会更改，如果我尝试刷新初始模板，则会消失

以下是脚本：

<script>
    $(function () {
        // Prepare
        var History = window.History; // Note: We are using a capital H instead of a lower h

        if (!History.enabled) {
            // History.js is disabled for this browser.
            // This is because we can optionally choose to support HTML4 browsers or not.
            return false;
        }

        // Bind to StateChange Event
        History.Adapter.bind(window, 'statechange', function () { // Note: We are using statechange instead of popstate
            alert('we have a state change');
            alert(document.URL);
            if (document.URL == 'http://localhost/e-support-uop.com/') {
                alert('ok');
                $('#main_contents').load('home.php');

            }
            else {
                var State = History.getState();

                $('#main_contents').load(State.url);
            }
        });

        $('a').click(function (evt) {
            evt.preventDefault();
            History.pushState(null, $(this).text(), $(this).attr('href'));
        });
    });
</script>


$（函数（）{
//预备
var History=window.History；//注意：我们使用的是大写字母H，而不是小写字母H
如果（！History.enabled）{
//此浏览器已禁用History.js。
//这是因为我们可以选择是否支持HTML4浏览器。
返回false；
}
//绑定到StateChange事件
bind（窗口'statechange'，函数（）{//注意：我们使用的是statechange而不是popstate
警报（“我们的状态发生了变化”）；
警报（document.URL）；
如果（document.URL=='http://localhost/e-support-uop.com/') {
警报（“正常”）；
$（'#main_contents'）.load（'home.php'）；
}
否则{
var State=History.getState（）；
$（“#主要内容”）.load（State.url）；
}
});
$（'a'）。单击（函数（evt）{
evt.preventDefault（）；
History.pushState（null，$（this.text（），$（this.attr（'href'））；
});
});

下面是html的基础知识

<html>
 <head>
   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
   <script src="javascript/jquery-1.9.1.min.js"></script>
   <script src="history.js/scripts/bundled/html4+html5/jquery.history.js" type="text/javascript"></script>
</head>
<body>
....
  <div id="main_contents">
       <!--all the content goes here and the this is the div that I want to change..-->
...
       <div id="rooms">
          <img src='images/rooms2.jpg' />
          <div class='description'>  
        <p class='description_content'>
              <a href="rooms.php" rel="rooms.php" class='img_link'>Rooms</a>
                     <!-- on click on this link I need main_contents content refresh -->  
            </p>  
        </div>  
   </div> <!--end main contents -->
</body>


....
...

我想更改div的内容，但保留并刷新函数。初始模板也应该在那里

首先，pushState有3个输入参数，而不是4。如果你把这段代码放在codebin或jsfiddle中，调试起来会更容易。谢谢whiteletters。我用修改了。我不认为这是调试问题。代码是有效的。问题是，我想不出一种方法来更改url，但同时保留初始模板。谢谢。你能告诉我们“rooms.php”和你的ajax脚本看起来怎么样吗？我认为您还应该知道，您在历史堆栈中推送的URL是您在调用getState之后在Adapter.bind中得到的URL。为什么要在“如果”中使用if-else语句和当前浏览器URL。js提供了getState，这是管理过去URL的最佳方式。无论如何，我认为你应该多解释一些，让社区的人理解你需要解决的问题。good luckThe rooms.php是一个简单的短语，没有任何格式。只要ajax脚本通过load命令嵌入到jquery中，就没有单独的ajax文件。。