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

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

20 голосов
/ 22 ноября 2010

При использовании метода 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 ]

19 голосов
/ 22 ноября 2010

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

7 голосов
/ 22 ноября 2010

Метод 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 голосов
/ 28 января 2015

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

$.ajax({
    type: "GET",
    url: url,
    dataType: 'html',
    success: function(data) {
        $('#foo').html(
            $('<div />').html(data).find('#foo').html()
        );
    }
});
1 голос
/ 07 июня 2013

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

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

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

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

0 голосов
/ 22 ноября 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...