使用Jquery AJAX加载页面片段

Question

我想使用$.ajax()请求一个页面，但是只加载该页面的一部分。 我知道你可以使用.load()指定要加载哪些页面部分，但我想知道是否能用$.ajax()实现这个功能？

- user288423

---

可能是在jQuery中提取HTML文档的一部分的重复问题。 - Simon East

Answer 1

如果你正在想知道，stoplion指的是这个功能：加载页面片段（在该页面下滑）：

.load() 方法与 $.get() 不同，它允许我们指定要插入的远程文档的一部分。这是使用 url 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定跟随第一个空格的部分是 jQuery 选择器，用于确定要加载的内容。

由于 $.get() 看起来不支持它，我假设 $.ajax 也不支持它。实现这个功能的简单方法如下：

$.ajax({
   url: 'http://example.com/page.html',
   data: {},
   success: function (data) {
      $("#el").html($(data).find("#selector"));
   },
   dataType: 'html'
});

这相当于

$("#el").load('http://example.com/page.html #selector');

需要注意的是，特殊语法（'#selector'）意味着加载的HTML中存在的脚本不会被执行。请参见.load()文档中的“脚本执行”部分。

- Jordan Reiter

---

不，它们不一样。如果#selector在顶层，.ajax()将无法工作。 - Derek 朕會功夫

@Derek 你说得对。看起来 jQuery 把响应包装在一个 div 中，然后在其中搜索选择器。 - Jordan Reiter

Answer 2

您可以通过POST获取您的片段，将HTML附加到一个具有display: none;的div中。然后使用选择器获取您想要的片段并将其附加到您希望显示的区域。

Air代码：

<div id="tempRegion" style="display:none;">

</div>

$.ajax({
    url: "page.htm",
    type: "GET",
    success: function(results){

        $('#tempRegion').html(results);

        ...

        //  Now select fragment, append to display area
        var fragement = $('#someFragment').html();

        $('#displayRegion').html(fragement);

    })

});

- David Robbins

Answer 3

你的正确答案是：

$.ajax({
  url: 'http://example.com/page.html',
  data: {},
  success: function (data) {
    $("#el").html($(data).append(data).find("#selector"));
  },
  dataType: 'html'
});

- Po Po

Answer 4

使用load方法的简单解决方案：

$("#menu a").click(function(){
    event.preventDefault();
    $("#container").load(this.href + " #container p");
    return false;
});

只有在处理更复杂的脚本时，例如从PHP脚本或JSON文件发布或获取时，才使用Ajax方法，否则它会减缓您的网站速度。

- user1175087

---

OP已经知道它可以使用.load()工作，并且显然需要使用.ajax()来完成，否则他就不会提出这个问题。你的回答没有解决问题，而且你的链接也是垃圾邮件，因为它们与手头的主题无关。 - Andrew Barber