L'analyse a renvoyé le HTML de la requête jQuery AJAX

Ce que j'essaie de faire, il semble simple: obtenir une page HTML via $.ajax() et en retirer 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 HTML renvoyé.

Le violon sur lequel je joue ne fonctionne pas, mais il y a peu d'autre chose que je peux faire pour donner un exemple pratique.

MISE À JOUR: Mon nouveau violon fonctionne bien, mais il semble que le problème est que dans mon projet actuel, j'essaie d'analyser un grand fragment de HTML complexe. Est-ce un problème connu?

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

URL: / echo / html /

Les données doivent être fournies via POST

Donc, vous devez mettre à jour votre appel AJAX pour utiliser POST. De plus, la barre oblique est 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/

Si vous souhaitez l'analyser, jquery a un astérisque astérisque 🙂

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

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

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 est faux 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());

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

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

Ou, voici votre violon réglé et fonctionnant:

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

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

Mauvais exemple:

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

Jquery ne pouvait pas convertir cet élément en élément, car il souhaite convertir un arbre à élément unique. Mais ceux-ci n'ont pas de conteneur. L'exemple suivant devrait fonctionner:

Exemple correct:

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

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 censée avoir renvoyé innerHTML, il est explicitement exclu dans jquery, vous trouverez quelques-uns de ces lignes:

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

Cette étiquette en HTML doit lier une feuille de style externe.