Jquery 如何向浏览器解释如何记住Ajax请求？

浏览器和我的应用程序的“后退”按钮有问题。 webapp使用ajax和standart请求。这一切都是这样发生的：

我向

list.jsp

page发出GET请求-如果您检查下面提供的临时链接，这是您在应用程序中看到的第一个页面。现在我们进入第1页（整个页面已重新加载）

我向页面

4

发出Ajax请求（单击链接-即页码）。只重新加载了页面的一部分-一切正常。因此，现在我们在第4页

我向页面

5

发出Ajax请求（单击链接-即页码）。只重新加载了页面的一部分-一切正常。因此，现在我们在第5页

现在我按下浏览器的“后退”按钮（返回历史一步）什么也没发生。浏览器控制台不显示任何更改

这一步我再次按下浏览器的“后退”按钮。结果表明，该步骤执行正确。获取请求已发生

发生了什么事？为什么浏览器不记得步骤3中所做的更改？如何指示浏览器对ajax请求所做的更改进行

退回历史记录

你可以在网上查一下。试着翻阅一下书页。粉红色方块是当前页面指示器


更新1：

此代码在加载程序完成加载资源后初始化

$(function() {

    $(window).on('hashchange', refreshByHash);

    refreshByHash();

    function refreshByHash() {              
        var hash = window.location.hash; 
        console.log("hash = " + hash.substring(1));

        /* $.ajax({

               url : 'paginator.action?page=' + hash, // action
               type : 'GET', //type of posting the data
                dataType : 'html',
                async: true,
                success : function(htmlData) {
                    $('#paginator').html(htmlData);
                },
                error : function(xhr, ajaxOptions, thrownError) {
                    alert('An error occurred! ' + thrownError);
                },

            }); */

       }

 });

当用户单击
#idPage
（顺便说一句，使用类，现在您有多个具有相同ID和的元素）由于
href
属性为空，浏览器将加载
#
（并将转到页面顶部）

您应该防止用户单击链接时出现默认行为，例如

$('body').on('click', '#idPage', function(e) {
   // some code goes here
   e.preventDefault();
});

标签（
#
）对后退/前进按钮有效。如果附加hashtag并单击“上一步”，浏览器会将您返回到应用hashtag之前的状态。
我建议您在url中添加一个hash参数，这样浏览器就可以正确处理历史记录，并侦听hashchange事件。在大多数情况下，您可以将页面状态直接存储在那里，因此不必实现自己的历史处理。我整理了一个小MCVE：


$（函数（）{
//设置一些分页栏
对于（变量i=1；i<11；i++）{
$（“#页”）。追加(
$（''）.text（i.attr（'href'，'#'+i）
);
$（'#pages'）。追加（$（''）。文本（'.'）；
}
//加载第一页的内容
第（i）页的功能{
//模仿一些XHR
setTimeout（函数（）{
$（“#页面内容”）.text（'这是页面'+i）；
}, 200);
}
//基于哈希加载当前页面的内容
函数refreshByHash（）{
var hash=window.location.hash；
_uiPage（散列？+散列子串（1）：1）；
}
//刷新散列更改
$（窗口）.on（'hashchange'，refreshByHash）；
//页面加载时的初始状态
refreshByHash（）；
});

您是否使用原始javascript或某些框架，如angularjs或jquery？此外，内联也很好，因此回答您问题的人不必根据ground@hege_hegedus我使用jquery和javascript进行分页更改。核心框架是java。@hege_hegedus这太难使内联MCVE重现所发生的事情如果你附加hashtag
，你说的
是什么意思？如果现在href包含
#
，那么如何更改它？像
#someValue
？我可以把这行
e.preventDefault（）放进去吗紧跟在
$（'body'）之后。在（'click'，'#idPage'，函数（e）{
？顺便说一句，是
e
参考
元素
？你应该在关闭
]之前放好那一行）。不，
e
表示事件。我已经按照您所说的更改了脚本，现在浏览器
back按钮在第一次
back
单击后不可用。。。。您可以通过临时链接进行检查。另外，我在页面链接中将
div
更改为
class
。还有一个错误：
Uncaught ReferenceError:e未定义（匿名函数）@pagin_scripts.js:21x.event.dispatch@jquery-1.10.2.min.js:5v.handle@jquery-1.10.2.min.js:5
链接不可用。我试图在代码中实现您的解决方案，但遇到两个问题。请参阅更新1代码脚本。----------------------------1） 无法从发出ajax请求的位置获取ajax请求。如何将
散列值
传递到ajax代码中？------------------------------------2）ajax请求必须仅在浏览器按钮已显示的情况下执行，但每次我按下链接或浏览器按钮时，所有代码都会运行。@rozero我真的不明白在按下页码后如何显示页面，没有ajax请求。如果您可以第一次显示它们，下次按下浏览器按钮时也可以不使用ajax显示它们。我在
pagin_scripts.js
中有另一个脚本，您可以尝试检查
temp链接。该脚本由脚本加载器加载。根据这些代码，我通过按页码来管理ajax要更新的内容。但是，来自update 1part的代码被插入以管理brouser后退按钮。我是这样理解的。@rozero你有三个函数，本质上是一样的。我仍然不明白为什么第一次加载与其他加载不同。