如何从jQuery.ajax()过滤返回的数据?

时间:2010-11-22 12:07:27

标签: jquery ajax filter

使用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'
});

非常感谢任何帮助。

5 个答案:

答案 0 :(得分:19)

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 - 那么您必须使用{{1 }}。

如果您想选择其他元素 - 在此示例中为:filter()#header<h1>,... - 那么您必须使用#body

我不知道你的元素是否是find()的孩子,你可以使用这个“hack”:

<body>

通过使用此解决方法,您始终可以通过$("<div>").html(data).find( selector );获取元素。

答案 1 :(得分:7)

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的角度来看,这是一个黑客攻击!

答案 2 :(得分:2)

感谢@Matt

,这就是我能够让它工作的方式
$.ajax({
    type: "GET",
    url: url,
    dataType: 'html',
    success: function(data) {
        $('#foo').html(
            $('<div />').html(data).find('#foo').html()
        );
    }
});

答案 3 :(得分:1)

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

  

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

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

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

答案 4 :(得分:0)

使用

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

我用它来过滤返回HTML conent的ajax调用的结果