Как мне отфильтровать возвращенные данные из 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'
});

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

Источник

5 ответов

Решение

Использование 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(),

Источник

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!

Источник

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

$.ajax({
    type: "GET",
    url: url,
    dataType: 'html',
    success: function(data) {
        $('#foo').html(
            $('<div />').html(data).find('#foo').html()
        );
    }
});
Источник

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

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

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

http://api.jquery.com/load/

Источник

Использование

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

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

Источник
Другие вопросы по тегам