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

你可以这样做：

$('#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 2

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

既然你建议你有 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 来完成我认为您想要做的事情。

Answer 3

None options/functions 将更新浏览器显示的 URL...它们只是加载并显示您请求的页面内容到当前页面。

出于历史目的，您可以按照 here 的说明使用本机 "history API"，但仍然没有 URL 更新...

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

jQuery/Ajax Load external page into content div

javascript

ajax

jquery

load