如何过滤从 jQuery.ajax() 返回的数据？答案

【问题标题】：How do I filter the returned data from jQuery.ajax()?如何过滤从 jQuery.ajax() 返回的数据？
【发布时间】：2011-05-13 19:31:26
【问题描述】：

当使用jQuery.ajax() 方法时，我正在努力过滤返回的数据以获得我需要的数据。我知道使用.load() 和其他jQuery AJAX 方法很容易，但我需要特别使用.ajax()。

例如，我知道这是可行的；

var title = $(data).filter('title'); // Returns the page title

但是如果我只想要一个 id="foo" 的 div 的内容呢？

var foo = $(data).filter('#foo'); // None of these work
var foo = $(data).find('#foo');   //
var foo = $('#foo', data);        //

理想情况下，我想要一种方法，我可以向其中传递一个普通的 jQuery 选择器，该方法适用于选择标题、div 或 jQuery 可以选择的任何其他元素。这样我就可以将任何字符串传递给我自己的 ajax 函数 - 例如;

myApp.ajax({
    url: 'myPage.html',
    filterTitle: 'title',
    filterContent: '#main-content'
});

任何帮助将不胜感激。

【问题讨论】：

$(data).find('#foo'); 或 $(data).filter('#foo'); 必须工作。不可能这两个都不起作用。您确定检索到的页面上有 #foo 元素吗？
他们似乎都返回了一个空对象。当使用 Chrome 观察变量 foo 时，它显示为 Object[0] 并展开它会显示上下文：未定义和长度：0。对于“查找”和“过滤”也是如此。记录 foo.html() 返回 null。
那个对象根本不是空的。请参阅我的答案以获取工作示例。
抱歉，是的，我确定页面中有相关元素。它实际上是“.ops_datagrid”，但我敢肯定。在 Object[0] 下还有一个名为 prevObject 的属性。它是一个包含“Comment”、“Text”、“HTMLMetaElement”、“Text”、“HTMLTitleElement”、“Text”、“HTMLDivElement”、“Text”、“HTMLParagraphElement”等的数组......
第一个 div 元素有一个属性 textContent '.ops_datagrid'

标签： jquery ajax filter

【解决方案1】：

filter() 与 find() 的使用取决于您检索到的 HTML 页面的结构。例如，如果这是检索到的页面：

<!DOCTYPE html>

<html>

<head>
    <title>Foo</title>
</head>

<body>
    <div id="wrap">
        <div id="header">
            <h1>Foo</h1>
        </div>
        <div id="body"> content </div>
    </div>
    <div id="tooltip"> tooltip </div>
</body>

</html>

如果您想选择顶级元素 = 是 <body> 的直接子元素 - 在本例中：#wrap 或 #tooltip - 那么您必须使用 filter()。

如果你想选择其他元素 - 在这个例子中：#header, <h1>, #body, ... - 那么你必须使用find()。

我不知道你的元素是否是<body> 的子元素，你可以使用这个“hack”：

$("<div>").html(data).find( selector );

通过使用此解决方法，您始终可以通过 find() 获取元素。

【讨论】：

对于其他任何人，如果有帮助，下面的 Matts 回答会以不同的方式解释相同的方法
感谢这篇文章，工作顺利。只是一个小细节，为了安全起见，您可能想使用 $('
') 而不是 $('
')。
@Dan 我相信$('<div>') 是安全的。如果你将单个标签传入$ 函数，像这样：$('<foo>')，jQuery 将执行这个：document.createElement('foo')。

【解决方案2】：

感谢@Matt，这就是我能够让它工作的方式

$.ajax({
    type: "GET",
    url: url,
    dataType: 'html',
    success: function(data) {
        $('#foo').html(
            $('<div />').html(data).find('#foo').html()
        );
    }
});

【讨论】：

【解决方案3】：

如果您不需要完整的$.ajax 方法提供的任何特殊功能，您应该尝试$.load()：

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

$('#result').load('ajax/test.html #container');

http://api.jquery.com/load/#loading-page-fragments

【讨论】：

【解决方案4】：

jQuery.load 方法使用如下代码：

// If successful, inject the HTML into all the matched elements
if ( status === "success" || status === "notmodified" ) {
  // See if a selector was specified
  self.html( selector ?
    // Create a dummy div to hold the results
    jQuery("<div />")
      // inject the contents of the document in, removing the scripts
      // to avoid any 'Permission Denied' errors in IE
      .append(res.responseText.replace(rscript, ""))

      // Locate the specified elements
      .find(selector) :

    // If not, just inject the full result
    res.responseText );
}

即，它将完整响应附加到它创建的 DIV，然后在其上使用 find(selector)。

所以你应该看看类似的东西：

var foo = $('<div />').html(data).find('#foo'); // This looks like it'll work!

从 jQuery 的角度来看有点 hack！

【讨论】：

太好了，谢谢。我对上面的 Sime Vidas 给出了最佳答案，仅仅是因为他先到了那里。不过，感谢您提供额外的信息。

【解决方案5】：

使用

$(data).filter("#foo").text();

我正在使用它来过滤返回 HTML 内容的 ajax 调用的结果

【讨论】：

这只是返回一个空字符串。
这对我来说效果很好。您没有发布任何关于您的标记示例的详细信息...