Извлечь часть HTML-документа в jQuery - PullRequest
Новая
       33

Извлечь часть HTML-документа в jQuery

31 голосов
/ 26 января 2010

Я хочу сделать AJAX-вызов страницы, возвращающей HTML, извлечь часть HTML (используя селекторы jQuery), а затем использовать эту часть в моем JavaScript на основе jQuery.

AJAX-поиск довольно прост. Это дает мне весь HTML-документ в параметре «data» функции обратного вызова.

Чего я не понимаю, так это как обработать эти данные полезным способом. Я хотел бы обернуть его в новый объект jQuery, а затем использовать селектор (с помощью find (), я считаю), чтобы получить только ту часть, которую я хочу. Как только я получу это, я передам его другому объекту JavaScript для вставки в мой документ. (Именно из-за этой делегации я не использую jQuery.load ().)

Примеры get (), которые я вижу, кажутся вариациями в этом: 

$('.result').html(data);

... который, если я правильно понимаю, вставляет весь возвращенный документ в выбранный элемент. Мало того, что это подозрительно (это не вставляет <head> и т. Д.?), Но это слишком грубо для того, что я хочу.

Предложения об альтернативных способах сделать это очень приветствуются.

Ответы [ 5 ]

46 голосов
/ 26 января 2010

Вы можете использовать свой стандартный синтаксис селектора и передать data в качестве контекста для селектора. Второй параметр, data в нашем случае, является нашим контекстом. 

$.post("getstuff.php", function(data){
  var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");

Это эквивалентно выполнению: 

$(data).find("#mainDiv");

В зависимости от того, как вы планируете использовать это, $.load() может быть лучшим путем, поскольку он позволяет и URL-адресу, и селектору фильтровать результирующие данные, которые передаются непосредственно в элемент, метод позвонил: 

$("#mylocaldiv").load("getstuff.php #mainDiv");

Это загрузит содержимое <div id='mainDiv'>...</div> в getstuff.php в наш локальный элемент страницы <div id='mylocaldiv'>...</div>.

5 голосов
/ 26 января 2010

Вы можете создать div, а затем поместить в него HTML-код, например: & hellip; 

var div = $("<div>").html(data);

... а затем отфильтровать данные следующим образом & hellip; 

var content = $("#content", div.get(0));

& hellip; и затем используйте это.

Это может выглядеть опасно, когда вы создаете элемент и вставляете в него произвольный HTML-код, но это не так: что-нибудь опасное (например, тег script) будет выполнено только тогда, когда оно вставлено в документ . Здесь мы вставляем данные в элемент, но этот элемент никогда не помещается в документ; только если мы вставим content в документ, что-нибудь будет вставлено, и даже тогда будет вставлено только что-нибудь в content.

4 голосов
/ 26 января 2010

Вы можете использовать load для нового элемента и передать его функции: 

function handle(element){
  $(element).appendTo('body');
}

$(function(){
  var div = $('<div/>');
  div.load('/help a', function(){handle(div);});
});

Пример: http://jsbin.com/ubeyu/2

0 голосов
/ 08 марта 2018

Вы можете сделать это так 

$.get(
        url,
        {
          data : data
        },
        function (response) {
            var page_content = $('.page-content',response).get(0);
            console.log(page_content);
        }
    )

Здесь, в console.log, вы увидите внутренний HTML-код ожидаемой / желаемой части ответа. Тогда вы можете использовать его по своему желанию

0 голосов
/ 26 января 2010

Возможно, вы захотите взглянуть на параметр dataFilter() метода $.ajax. Он позволяет вам выполнять операции с результатами до того, как они будут переданы.

jQuery.ajax

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

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

...