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更新...