Как мне отфильтровать возвращаемые данные из 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, который будет работать для выбора заголовков, div или любого другого элемента, который может выбрать jQuery. Это сделано для того, чтобы я мог передать любую строку в свою собственную функцию ajax - например,

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

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


filter jquery ajax
person smix96    schedule 22.11.2010    source источник
comment
Либо $(data).find('#foo');, либо $(data).filter('#foo'); должны работать. Ни один из этих двух вариантов не работает. Вы уверены, что на полученной странице есть элемент #foo?   -  person Šime Vidas    schedule 22.11.2010
comment
Кажется, что они оба возвращают пустой объект. При использовании Chrome для просмотра переменной foo она отображается как Object [0], а ее раскрытие показывает context: undefined и length: 0. Это верно для 'find' и 'filter'. Ведение журнала foo.html () возвращает значение null.   -  person smix96    schedule 22.11.2010
comment
этот объект совсем не пустой. Пожалуйста, посмотрите мой ответ на рабочий образец.   -  person Lorenzo    schedule 22.11.2010
comment
Извините, да, я уверен, что на странице есть соответствующий элемент. На самом деле это '.ops_datagrid', но я уверен. В Object [0] есть еще одно свойство, которое называется prevObject. Это массив, содержащий 'Комментарий', 'Текст', HTMLMetaElement ',' Текст ',' HTMLTitleElement ',' Текст ',' HTMLDivElement ',' Текст ',' HTMLParagraphElement 'и т. Д.   -  person smix96    schedule 22.11.2010
comment
Первый элемент div имеет свойство textContent '.ops_datagrid'   -  person smix96    schedule 22.11.2010

Ответы (5)


arrow_upward
20
arrow_downward

Использование 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> или нет, вы можете использовать этот "прием":

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

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

person Šime Vidas    schedule 22.11.2010
comment
Для всех остальных ответ Мэтта ниже объясняет тот же метод по-другому, если он помогает. - person smix96; 22.11.2010
comment
Спасибо за этот пост, работает хорошо. Небольшая деталь: на всякий случай вы можете использовать $ ('‹div /›') вместо $ ('‹div›'). - person Dan Doyon; 14.03.2011
comment
@ Дэн Я считаю, что $('<div>') в безопасности. Если вы передадите один тег в функцию $, например: $('<foo>'), jQuery выполнит это: document.createElement('foo'). - person Šime Vidas; 14.03.2011

arrow_upward
7
arrow_downward

Метод 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!

person Matt    schedule 22.11.2010
comment
Отлично, спасибо. Я дал высший ответ Симе Видасу выше просто потому, что он пришел первым. Хотя дополнительная информация приветствуется. - person smix96; 22.11.2010

arrow_upward
2
arrow_downward

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

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

arrow_upward
1
arrow_downward

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

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

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

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

person Volker Rose    schedule 07.06.2013

arrow_upward
0
arrow_downward

Использовать

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

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

person Lorenzo    schedule 22.11.2010
comment
Это просто возвращает пустую строку. - person smix96; 22.11.2010
comment
В моем случае это работает очень хорошо. Вы не разместили никаких подробностей в своем образце разметки ... - person Lorenzo; 22.11.2010