jQuery / Ajax將外部頁面加載到內容div中

Question

我有一個網站，我無需刷新頁面即可將外部html內容加載到我的index.html <div id="content"> 。 我設法用jQuery load（）函數做到這一點。 當我讀到load()和ajax() ，據我了解，ajax是一個比可加載性更可配置的函數，但基本上做同樣的事情（如果我錯了，請糾正我*）。 當我使用load（）時，外部內容會加載，但URL地址不會顯示當前頁面。 因此，我想問問是否有人可以向我展示如何做到：

• 使ajax（）函數的行為類似於load（）。

• 動態顯示並獲取URL中的href以獲取書簽等。

Ajax（）代碼示例： https : //plnkr.co/edit/ReSdd5U6dOYbQxctzvk7?p=preview

Load（）代碼示例： https : //plnkr.co/edit/gpsZbOip0VtO7iXTPaM2?p=preview

有什么問題嗎 問！

預先感謝！

/ E。

Answer 1

據我了解，您正在尋找使用jQuery load（）或等效方法，並更新瀏覽器歷史記錄（地址欄）以反映剛剛加載的內容的url。

由於您建議您可以使用load（） ，因此您需要的是瀏覽器History_API ，特別是pushState（） 。

您可以閱讀有關以下內容的更多信息： History_API

您還可以閱讀有關： pushState（）方法的信息。

根據您的load（）示例，我認為您可以使用以下內容對其進行擴展，以獲取所需的內容：

$('#content').load('link1.html');
$('a').click(function(e){
  var page = $(this).attr('href');
  $('#content').load(page + '.html');

  var stateObj = {loaded : page};
  history.pushState(stateObj, "page title", page + '.html');

  return false; // don't follow the link
});

您還可以看到Mozilla的基於AJAX的導航示例 ，該示例執行我想通過AJAX而不是jQuery進行的操作，並使用pushstate。

Answer 2

您可以執行以下操作：

$('#btn1').click(function(e){
   var href = this.href;  // get href from link

   $.ajax({
       url: href,
       type: 'GET',
       dataType: 'html',
       success: function(data){
         $('#content').html(data);
       }
   });

   return false; // don't follow the link

}）;

Answer 3

這些選項/功能都不會更新瀏覽器顯示的URL……它們只是加載並顯示您請求的頁面內容到當前頁面。

出於歷史記錄的目的，您可以使用此處所述的本機“ history API”，但仍然不會進行URL更新...