更新内容，更改URL而不加载页面window.history.pushState

Question

您好，我打算在我的网站中使用window.history.pushState，但是我对此一无所知。

我想要的是我有一个页面dashboard.php，并且想要将URL更新为dashboard.php？do = edit＆who = me并加载ID为contentdiv的div不会加载整个页面。

我知道这可以通过此代码完成

 function processAjaxData(response, urlPath){
   document.getElementById("content").innerHTML = response.html;
   document.title = response.pageTitle;
   window.history.pushState({
     "html":response.html,
     "pageTitle":response.pageTitle}, "", urlPath);
 }

  window.onpopstate = function(e){
    if(e.state){
      document.getElementById("content").innerHTML = e.state.html;
      document.title = e.state.pageTitle;
    }
};

但是我不知道如何实现这个功能。

而且我也想如果浏览器不支持此功能，那么在这种情况下，它应该像一个链接，刷新页面可能没问题

任何想法/帮助表示赞赏

Answer 1

使用一些JavaScript库的路由，例如Routie，你可以在Github上找到- http://projects.jga.me/routie/

下面是使用路由和jQuery进行路由的示例：

routie({
    'dashboard/edit/:who': function (who) {
       $.ajax({
           url: 'api.php',
           data: {prop: 'propVal'},
           method: 'POST'
       })
       .done(function (res) {
          console.log(res);
       });
    }
);

要运行上述功能，请进入YOURSITE.COM#dashboard/edit/me而不是YOURSITE.COM/dashboard.php?=...