Парсинг возвратил HTML из запроса jQuery AJAX

То, что я пытаюсь сделать, кажется простым: получите HTML-страницу через $.ajax() и вытащите из нее значение.

$(function () {
    $.ajax({
        url: "/echo/html",
        dataType: "html",
        success: function (data) {
            $('#data').text(data);
            $('#wtf').html($(data).find('#link').text());
        },
        data: {
            html: '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a id="link">content<\/a><\/li><\/ul><\/body><\/html>'
        }
    });
});

Проблема заключается в том, что jQuery отказывается анализировать возвращенный HTML.

fiddle Я играю с этим, пока что не работает, поэтому я еще могу сделать, чтобы обеспечить рабочий пример.

ОБНОВЛЕНИЕ: Моя новая скрипка работает нормально, но, похоже, проблема в том, что в моем фактическом проекте я пытаюсь разобрать большой, сложный бит HTML. Это известная проблема?

ОТВЕТЫ

Ответ 1

Ваш код работает нормально. Вы просто не используете jsFiddle API правильно. Проверьте документы для /echo/html/ (http://doc.jsfiddle.net/use/echo.html#html):

URL:/echo/html/

Данные должны быть предоставлены через POST

Итак, вам нужно обновить вызов AJAX, чтобы использовать POST. Также необходима конечная косая черта.

$(function () {
    $.ajax({
        url: "/echo/html/",
        type: "post",
        dataType: "html",
        success: function (data) {
            $('#data').text(data);
            $('#wtf').html($(data).find('#link').text());
        },
        data: {
            html: '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a id="link">content<\/a><\/li><\/ul><\/body><\/html>'
        }
    });
});

DEMO: http://jsfiddle.net/hcrM8/6/

Ответ 2

Если вы хотите проанализировать его, jquery имеет отличный трюк:)

 ParsedElements = $(htmlToParse);
 Console.log(ParsedElements);

Теперь у вас есть элементы DOM, которые вы можете перемещать, не помещая их в тело документа.

Ответ 3

jQuery.parseHTML()

http://api.jquery.com/jQuery.parseHTML/

str = "hello, <b>my name is</b> jQuery.",
  html = $.parseHTML( str ),
  nodeNames = [];

// Gather the parsed HTML node names
$.each( html, function( i, el ) {
  nodeNames[ i ] = "<li>" + el.nodeName + "</li>";
});

Что-то не так с вашим ajax на скрипке

http://jsfiddle.net/hcrM8/5/

var html= '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a class="disabled" id="link">content<\/a><\/li><\/ul><\/body><\/html>';
            h = $.parseHTML(html);
            $('#data').text(h);
            $('#wtf').html($(h).find('#link').text());

Ответ 4

У меня была такая же проблема, и я исправил инкапсуляцию запрошенного кода html только в один элемент контейнера.

Плохой пример:

<a href="link">Linkname</a>
<p>Hello world</p>

Jquery не может преобразовать это в элемент, потому что он хочет преобразовать одно дерево элементов. Но у них нет контейнера. Следующий пример должен работать:

Правильный пример:

<div>
    <a href="link">Linkname</a>
    <p>Hello world</p>
</div>

Ответ 5

Почему бы вам просто не использовать метод загрузки?

$( "#wtf" ).load( "/echo/html #link" );

Или, здесь ваша скрипка исправлена ​​и работает:

http://jsfiddle.net/hcrM8/4/

Ответ 6

Я столкнулся с одной и той же проблемой, и это происходит не потому, что вы делаете что-то неправильно.

потому что тег "link" не должен возвращать какой-либо innerHTML, он явно исключен в jquery, вы найдете некоторые, где находится эта строка:

rnoInnerhtml = /<(?:script|style|link)/i,

Этот тег в HTML должен ссылаться на внешнюю таблицу стилей.

Ответ 7

Все ответы не указывают на реальную проблему, jQuery, кажется, игнорирует тег head и body и создает массив узлов. Что вы обычно хотите, извлеките тело и проанализируйте его.

Взгляните на этот полезный ответ, я не хочу копировать его работу: fooobar.com/info/292100/....