web-dev-qa-db-fra.com

Analyse du code HTML renvoyé par jQuery AJAX demande

Ce que j'essaie de faire semble simple: obtenir une HTML page à travers $.ajax() et en extraire une valeur.

$(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>'
        }
    });
});

Le problème est que jQuery refuse d'analyser le code HTML renvoyé.

Le fiddle Je joue avec ceci car ne fonctionne pas dans l’intervalle, alors je ne peux rien faire d’autre pour donner un exemple concret.

UPDATE: Mon nouveau violon fonctionne correctement, mais il semble que le problème est que, dans mon projet actuel, j'essaie d'analyser un élément HTML volumineux et complexe. Est-ce un problème connu?

javascriptjqueryhtmlajax
19
Stephen Collins

Votre code fonctionne bien. Vous n'utilisez tout simplement pas l'API de jsFiddle. Vérifiez la documentation pour /echo/html/ ( http://doc.jsfiddle.net/use/echo.html#html ):

URL:/echo/html /

Les données doivent être fournies via POST

Vous devez donc mettre à jour votre appel AJAX pour utiliser POST. La barre oblique finale est également nécessaire.

$(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/

16
Rocket Hazmat

Si vous voulez l’analyser, jquery a une astuce géniale :)

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

Vous avez maintenant des éléments DOM que vous pouvez parcourir sans les placer dans le corps du document.

6
Anthony Iacono

jQuery.parseHTML ()

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

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

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

Quelque chose ne va pas avec votre ajax sur le violon

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());
3
Rizwan Mumtaz

Pourquoi n'utilisez-vous pas simplement la méthode de chargement?

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

Ou alors, voici votre violon réparé et fonctionnel:

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

1
dave

Toutes les réponses n'indiquent pas le vrai problème, jQuery semble ignorer les balises head et body et crée un tableau de nœuds. Ce que vous voulez normalement, c’est extraire le corps et l’analyser.

Jetez un oeil à cette réponse utile, je ne veux pas copier son travail: https://stackoverflow.com/a/12848798/2590616 .

1
RiZKiT

J'ai eu le même problème et j'ai corrigé l'encapsulation du code HTML demandé dans un seul élément conteneur.

Mauvais exemple:

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

Jquery n'a pas pu convertir ceci en élément, car il souhaite convertir un seul arbre d'éléments. Mais ceux-ci n'ont pas de conteneur. Les exemples suivants devraient fonctionner:

Bon exemple:

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

Je suis confronté au même problème, et ce n'est pas parce que vous faites quelque chose de mal.

c'est parce que la balise "link" n'est pas supposée avoir d'innerHTML retourné, c'est explicitement exclu dans jQuery, vous en trouverez où cette ligne: 

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

Cette balise en HTML est supposée être liée à une feuille de style externe.

0
ZMs