AJAX 从内部链接加载元素

Question

我在导航中有一个未排序的链接列表，如下所示：

<ul class="main-nav-child">
   <li><a href="/collections/1">collection one</a></li>
   <li><a href="/collections/2">collection two</a></li>
   <li><a href="/collections/3">collection three</a></li>
</ul>

点击后，我使用这个 sn-p 将每个链接的 html 输出加载到一个名为 .main-content 的容器中：

$('ul.main-nav-child a').bind('click', function(e) {           
  var url = $(this).attr('href');
  $('.main-content').load(url); // load the html response into a DOM element
  e.preventDefault(); // stop the browser from following the link
});

问题：我只想从链接中加载某个元素的内容，而不是整个页面。每个页面都有一个名为 .main-content 的元素，我想通过 ajax 获取它并将其显示在页面上，再次在 .main-content 中显示。

任何关于如何过滤.load() 的指导将不胜感激。

Answer 1

您应该只能引用选择器 (docs)；

var url = $(this).attr('href');
$(".main-content").load(url + " .main-content");

请注意，如果您的页面中不存在.main-content，则它不会打扰发出请求。同样，如果目标页面中不存在.main-content，则不会返回任何内容。