更新內容，更改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?=...