Как фильтровать возвращаемые данные из jQuery.ajax()?

При использовании метода jQuery.ajax() я пытаюсь фильтровать данные, которые возвращаются, чтобы получить именно то, что мне нужно. Я знаю, что это легко использовать .load() и, возможно, другие jQuery AJAX методы, но мне нужно использовать .ajax() специально.

Например, я знаю, что это работает;

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

Но что, если я просто хочу содержимое div с id = "foo"?

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

В идеале, мне нужен один метод, в который я могу передать обычный селектор jQuery, который будет работать для выбора титров, divs или любого другого элемента, который может выбрать jQuery. Это значит, что я могу передать любую строку в мою собственную функцию ajax - например:

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

Любая помощь будет принята с благодарностью.

Ответы

Ответ 1

Использование filter() vs. 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> или нет, вы можете использовать этот "хак":

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

Используя эту рабочую среду, вы всегда получаете элементы через find().

Ответ 2

В методе 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. Он добавляет полный ответ на созданный DIV, а затем использует find(selector).

Итак, вы должны смотреть на что-то вроде:

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

Немного взлома с точки зрения jQuery!

Ответ 3

Вот как я смог заставить его работать благодаря @Matt

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

Ответ 4

Если вам не нужна специальная функциональность, предоставляемая полным методом $.ajax, вы должны дать $.load() попытку:

Метод .load(), в отличие от $.get(), позволяет нам указать часть удаленного документа, который нужно вставить. Это достигается специальным синтаксисом параметра url. Если один или несколько символов пробела включены в строку, часть строки, следующей за первым пространством, считается селектором jQuery, который определяет загружаемый контент.

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

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

Ответ 5

Используйте

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

Я использую это, чтобы отфильтровать результат вызова ajax, который возвращает HTML-код