jquery ajax中的哈希和pushstate答案

【问题标题】：hashing and pushstate in jquery ajaxjquery ajax中的哈希和pushstate
【发布时间】：2016-07-12 07:45:55
【问题描述】：

我有 3 个按钮

 <div onclick="javascript:newmessage()" class="mailcontents">New Message</div>
<div onclick="javascript:inboxmails()" class="mailcontents">Inbox</div>
<div onclick="javascript:sentmailsbox()" class="mailcontents">Sent</div>

以及必须显示内容的 div

 <div id="inbox"></div>
<div id="sent"></div>

Onclick 的每一个我通过调用各自的函数来改变内容

    var times = 0;
   function inboxmails(){

       times++;
location.hash = times;
       $('#inbox').empty();
       $('#sent').empty();
       $('#newmessage').empty();
       $.ajax({
                success: function (data) {
                    $('#inbox').append('inbox data');

                }
            });
        }
   function sentmailsbox(){
       times++;
location.hash = times;
       $('#inbox').empty();
       $('#sent').empty();
       $('#newmessage').empty();
       $.ajax({
                success: function (data) {
                    $('#sent').append('sent data');

                }
            });

   }
   function newmessage(){
       $('#inbox').empty();
       $('#sent').empty();
       $('#newmessage').empty();
       $.ajax({
                success: function (data) {
                    $('#newmessage').append('new message data');

                }
            });

   }

我还添加了散列，将散列标签和数字值添加到 url

这是plunker代码https://plnkr.co/edit/tTMzTFIHD03pkIt4CkHO?p=preview

但是当我点击浏览器的后退按钮时，它必须重新加载以前的 ajax 内容。即，如果我点击inbox，它会显示inbox data，然后我点击sent，它会显示sent data，然后当我点击浏览器的后退按钮时，它必须显示收件箱内容inbox data，即以前的内容。

我了解如何使用散列更改网址。但我无法理解，也找不到合适的例子来推送状态，即推回历史/显示之前的 ajax 内容。

我检查了各种示例。但我不明白如何使用散列加载 ajax 内容。

请帮忙！！！提前谢谢！！！

【问题讨论】：

标签： javascript jquery ajax pushstate hashchange

【解决方案1】：

您没有将任何函数绑定到主题标签更改事件。在 JavaScript 中，您可以使用此事件再次触发 AJAX 调用：

window.onhashchange = doThisWhenTheHashChanges;

见Mozilla

还有这个 JQuery library 你可以查看它解决了跨浏览器兼容性问题和完整的替代列表solutions

【讨论】：