When using the jQuery.ajax() method, I am struggling to filter the data that is returned to get exactly what I need. I know this is easy using .load() and probably the other jQuery AJAX methods but I need to use .ajax() specifically.

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

For example I know that this works;

例如，我知道这行得通;

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

But what if I just want the contents of a div with id="foo"?

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

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

Ideally, I want one method into which I can pass a normal jQuery selector, which will work for selecting titles, divs, or any other element that jQuery can select. This is so that I can pass in any string into my own ajax function - eg;

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

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

Any help would be greatly appreciated.

如有任何帮助，我们将不胜感激。

5 个解决方案

#1

The use of filter() vs. find() depends on the structure of your retrieved HTML page. For example, if this is the retrieved page:

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>

If you want to select the top-level elements = elements that are direct children of <body> - in this example: #wrap or #tooltip - then you have to use filter().

如果您想要选择*元素=元素，这些元素是的直接子元素—在这个示例中:#wrap或#tooltip—那么您必须使用filter()。

If you want to select other elements - in this example: #header, <h1>, #body, ... - then you have to use find().

如果您想选择其他元素——在这个示例中:#header，

， #body，…-然后你必须使用find()。

I you don't know whether your element is a child of <body> or not, you could use this "hack":

我你不知道你的元素是不是的子元素，你可以用这个“hack”:

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

$(" < div > "). html(数据)。找到(选择);

By using this work-around, you always get the elements via find().

通过使用这种方法，您总是通过find()获取元素。

#2

The jQuery.load method uses the following code:

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 );
}

I.e it appends the full response to a DIV it creates, and then uses find(selector) on that.

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

So you should be looking at something like:

所以你应该这样看:

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

Bit of a hack from jQuery's point of view!

从jQuery的角度来看!

#3

This is how I was able to get it working thanks to @Matt

感谢@Matt，我才能让它工作

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

#4

If you don't need any special functionality given by the full $.ajax method, you should give $.load() a try:

如果你不需要任何特别的功能，全部$。ajax方法，您应该尝试$.load():

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

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

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

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

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

#5

Use

使用

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

I am using this to filter the result of an ajax call that return an HTML conent

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

#1

The use of filter() vs. find() depends on the structure of your retrieved HTML page. For example, if this is the retrieved page:

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>

If you want to select the top-level elements = elements that are direct children of <body> - in this example: #wrap or #tooltip - then you have to use filter().

如果您想要选择*元素=元素，这些元素是的直接子元素—在这个示例中:#wrap或#tooltip—那么您必须使用filter()。

If you want to select other elements - in this example: #header, <h1>, #body, ... - then you have to use find().

如果您想选择其他元素——在这个示例中:#header，

， #body，…-然后你必须使用find()。

I you don't know whether your element is a child of <body> or not, you could use this "hack":

我你不知道你的元素是不是的子元素，你可以用这个“hack”:

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

$(" < div > "). html(数据)。找到(选择);

By using this work-around, you always get the elements via find().

通过使用这种方法，您总是通过find()获取元素。

#2

The jQuery.load method uses the following code:

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 );
}

I.e it appends the full response to a DIV it creates, and then uses find(selector) on that.

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

So you should be looking at something like:

所以你应该这样看:

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

Bit of a hack from jQuery's point of view!

从jQuery的角度来看!

#3

This is how I was able to get it working thanks to @Matt

感谢@Matt，我才能让它工作

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

#4

If you don't need any special functionality given by the full $.ajax method, you should give $.load() a try:

如果你不需要任何特别的功能，全部$。ajax方法，您应该尝试$.load():

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

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

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

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

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

#5

Use

使用

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

I am using this to filter the result of an ajax call that return an HTML conent

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

秒客网

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

5 个解决方案

#1

， #body，…-然后你必须使用find()。

#2

#3

#4

#5

#1

， #body，…-然后你必须使用find()。

#2

#3

#4

#5

相关文章