web-dev-qa-db-fra.com

Obtenez le contenu de la div d'une autre page avec jQuery Ajax

Je voudrais que page.html ajax-demande le contenu de side.html et extrait le contenu de deux de ses divs. Mais je ne trouve pas la bonne façon d’analyser la réponse, malgré tout ce que j’ai essayé. 

Voici side.html:

<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
</head>
<body>
<div id="a">ContentA</div>
<div id="b">ContentB</div>
</body>
</html>

et voici page.html

<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
<script type='text/javascript' src='jquery-1.9.0.min.js'></script>
</head>
<body>
Hello
<script type="text/javascript">
jQuery.ajax({
        url: "side.html",
        success: function(result) {
            html = jQuery(result);

            alert(html.find("div#a").attr("id"));
            alert(html.find("div#a").html());
            alert(html.find("div#a"));

        },
    });
</script>
</body>
</html>

Lorsque j'accède à cette page, je n’obtiens aucune erreur et les trois alert () s renvoient indéfini, indéfini et [objet Object]. Qu'est-ce que je fais mal? Exemple: live ici .

javascriptajaxjquery
8
Nown

Vous devez changer cette ligne:

html = jQuery(result);

Pour ça:

html = jQuery('<div>').html(result);

Et en fait, mieux encore, vous devriez déclarer cela comme une variable locale:

var html = jQuery('<div>').html(result);

Explication

Lorsque vous exécutez jQuery(result), jQuery extrait les enfants de l'élément <body> et renvoie un wrapper autour de ces éléments, par opposition à un wrapper jQuery pour l'élément <html>, ce qui, selon moi, est plutôt stupide.

Dans votre cas, le <body> de sidebar.html contient plusieurs éléments et des nœuds de texte. Par conséquent, l'objet jQuery renvoyé est un wrapper pour ces différents éléments et nœuds de texte.

Lorsque vous utilisez .find(), il recherche les descendants des éléments encapsulés par l’objet jQuery sur lequel vous l’appelez. Dans votre cas, le <div id="a"> est not un de ceux-ci car il s’agit en fait de l’un des éléments des éléments sélectionnés du wrapper et ne peut pas être un descendant de lui-même.

En l’enveloppant dans un <div> de votre choix, vous poussez ces éléments "vers le bas" d’un niveau. Lorsque vous appelez .find() dans mon code fixe ci-dessus, il recherche les descendants de ce <div> et trouve donc votre <div id="a">.

Commentaire

Si votre <div id="a"> n’était pas au niveau supérieur, c’est-à-dire un enfant immédiat du <body>, votre code aurait fonctionné. Pour moi, ce comportement est incohérent et donc incorrect. Pour résoudre ce problème, jQuery doit générer le conteneur <div> pour vous, lorsqu'il utilise sa magie d'extraction de contenu <body>.

16
leftclickben

Essaye ça :

$.get(url,function(content) {
    var content = $(content).find('div.contentWrapper').html();
    ...
}
0
Fedir RYKHTIK