jQuery/Ajax 将外部页面加载到内容 div答案

【问题标题】：jQuery/Ajax Load external page into content divjQuery/Ajax 将外部页面加载到内容 div
【发布时间】：2016-08-12 13:18:53
【问题描述】：

我有一个网站，我不想将外部 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.

【问题讨论】：

如果我关注您的问题，那么我认为您正在寻找的是 jQuery load() 和浏览器 History_API。签出：developer.mozilla.org/en-US/docs/Web/API/History_API
看看 jquery.fn.load 源码：james.padolsey.com/jquery/#v=1.11.2&fn=jQuery.fn.load 你会明白如何让 ajax() 函数表现得像 load()

标签： javascript jquery ajax load

【解决方案1】：

据我了解，您希望使用 jQuery load() 或等效的 AND 更新浏览器历史记录（地址栏）以反映刚刚加载的内容。

既然你建议你有 load() 工作，那么你所追求的是浏览器 History_API，特别是 pushState()。

您可以阅读更多关于：History_API

您还可以阅读：pushState() method

基于您的 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 based navigation example，它通过 AJAX 而不是 jQuery 执行我认为您希望执行的操作，并使用 pushstate。

【讨论】：

【解决方案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

});

【讨论】：

【解决方案3】：

这些选项/功能都不会更新浏览器显示的 URL...它们只是加载并将您请求的页面内容显示为当前页面。

出于历史目的，您可以做的是使用本机“历史 API”，如 here 所述，但仍然没有 URL 更新...

【讨论】：