Question

我想对HTML返回页面进行AJAX调用，提取部分HTML（使用jQuery选择器），然后在基于jQuery的JavaScript中使用该部分。

AJAX retrieval非常简单。这为回调函数的“data”参数提供了整个HTML文档。

我不明白的是如何以有用的方式处理这些数据。我想将它包装在一个新的jQuery对象中，然后使用一个选择器（通过我相信的find（））来获得我想要的部分。一旦我有了，我将把它传递给另一个JavaScript对象以插入我的文档。（这个委托就是为什么我首先不使用jQuery.load（））。

我看到的get（）示例似乎都是变体：

$('.result').html(data);

...如果我理解正确的话，将整个返回的文档插入到所选元素中。这不仅是可疑的（这不是插入<head>等吗？）但是它太粗糙了我想要的东西。

非常欢迎有关替代方法的建议。

Answer 1

您可以使用标准选择器语法，并将data作为选择器的上下文传递。在这种情况下，第二个参数data是我们的上下文。

$.post("getstuff.php", function(data){
  var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");

这相当于：

$(data).find("#mainDiv");

根据你计划如何使用它，$.load()可能是一个更好的路径，因为它允许URL和选择器过滤结果数据，直接传递给元素调用方法：

$("#mylocaldiv").load("getstuff.php #mainDiv");

这会将<div id='mainDiv'>...</div>中getstuff.php的内容加载到我们的本地页面元素<div id='mylocaldiv'>...</div>中。

Answer 2

您可以创建一个div，然后将HTML放入其中，就像这样......

var div = $("<div>").html(data);

...然后像这样过滤数据......

var content = $("#content", div.get(0));

...然后使用它。

这可能看起来很危险，因为你正在创建一个元素并将任意HTML放入其中，但事实并非如此：任何危险的东西（如script标记）只会在将插入文档时执行。在这里，我们将数据插入到元素中，但该元素永远不会放入文档中;只有当我们在文档中插入content时才会插入任何内容，即使这样，也只会插入content中的任何内容。

Answer 3

您可以对新元素使用load，并将其传递给函数：

function handle(element){
  $(element).appendTo('body');
}

$(function(){
  var div = $('<div/>');
  div.load('/help a', function(){handle(div);});
});

示例：http://jsbin.com/ubeyu/2

Answer 4

您可能需要查看dataFilter()方法的$.ajax参数。它允许您在结果传出之前对结果进行操作。

jQuery.ajax

Answer 5

你可以这样做 $获得（ URL， { 数据：数据 }， function（response）{ var page_content = $（'。page-content'，response）.get（0）; 的console.log（PAGE_CONTENT）; } ）在console.log中，您将看到响应中预期/所需部分的内部HTML。然后你可以按照自己的意愿使用它

在jQuery中提取部分HTML文档

5 个答案: