Sélectionnez le contenu de JQuery objet ajax retour

Question

Si je comprends bien, la fonction charge JQuery() récupère un document et peut effectuer la quivelent de:

$('#somecontenttograb').html() 

sur elle. Je voudrais savoir comment faire cela ... Essentiellement, je veux utiliser JQuery pour télécharger une page web de manière asynchrone, puis en extraire des éléments et les insérer dans mon propre document à différents endroits.

Je pense que l'appel .ajax est bon ici, mais j'ai du mal à comprendre l'objet retourné - je crois que l'argument passé à la fonction de réussite pourrait avoir ses éléments retirés, mais comment?

Merci,

Matt. Après avoir essayé le code affiché dans les deux réponses ci-dessous, j'ai essayé ceci et pendant que je peux utiliser une alerte pour me montrer l'url passée à l'appel d'ajax() et la fonction de succès est appelée, si j'alerte le $ (résultat) .find ('# content') seule la valeur null apparaît dans l'alerte. Si je mets l'URL de la première alerte dans un navigateur, je récupère une page valide. Qu'est-ce qui pourrait mal tourner?

Matt.

Answer 1

MISE À JOUR

En réponse aux commentaires que vous avez sur les autres réponses, je veux juste assurer que je comprends bien la situation:

• Vous testez de votre ordinateur local, pas du disque dur local (ce qui signifie que votre URL dans le navigateur inclut "http://localhost", et non un emplacement sur votre disque dur.)
• Lorsque vous effectuez la réponse AJAX, alert(...) -si le résultat donne null, ou un équivalent.
• L'URL est valide et peut être chargée dans votre navigateur.
• L'URL que vous demandez se trouve dans le même domaine que la page d'origine.

Si ces choses sont vraies, alors je vais essayer ce qui suit faire un peu de dépannage:

1. Utiliser Firefox et Firebug installer (nous aurons besoin pour déterminer si les requêtes AJAX ne parviennent pas, et pourquoi)
2. Inclure some logging dans votre code à l'aide Firebug's console
3. Utilisez la méthode de ajax(...) jQuery, et de gérer les erreurs en incluant un code d'enregistrement pour voir ce qui est arrivé. Vous pouvez peut-être éviter cette étape si la page sur laquelle vous vous trouvez n'a pas besoin d'une réponse visuelle pour une demande ayant échoué et que vous utilisez Firebug.

Voici le code que j'utiliserais pour cela:

$.ajax({ 
    url: "http://stackoverflow.com/", 
    success: function(html) { 
     var responseDoc = $(html); 
     // Output the resulting jQuery object to the console 
     console.log("Response HTML: ", responseDoc); 
    } 
    // Handle request failure here 
    error: function(){ 
     console.log("Failure args: ", arguments); 
    } 
}); 

Si vous publiez la sortie de vos journaux Firebug, il devrait être plus facile de comprendre le problème et trouver une solution pour vous. Firebug enregistre également XMLHttpRequests afin que vous puissiez voir exactement ce qui est envoyé vers et depuis le serveur, et Firebug va changer l'apparence de la requête si elle renvoie une sorte d'erreur de serveur (comment éviter # 3 des choses que j'ai listées au dessus).

---

Vous pouvez utiliser la méthode ajax(...), mais il serait plus facile d'utiliser get(...) avec un rappel, comme ceci:

$.get("http://stackoverflow.com", function(html) { 
    var responseDoc = $(html); 
}); 

responseDoc sera un objet jQuery vous pouvez utiliser pour extraire des éléments de et traitez comme n'importe quel autre objet jQuery. Vous pouvez extraire des éléments du responseDoc et les ajouter à votre document principal comme vous le souhaitez, en utilisant les méthodes jQuery manipulation.

Si vous avez besoin de la fonctionnalité supplémentaire fournie par la méthode $.ajax(...), vous utiliserez le code suivant.

$.ajax({ 
    url: "http://stackoverflow.com/", 
    success: function(html) { 
     var responseDoc = $(html); 
    } 
    error: function(XMLHttpRequest, textStatus, errorThrown){ 
     // Handle errors here 
    } 
}); 

Answer 2

Si l'URL que vous demandez le rendement HTML, vous pouvez utiliser des sélecteurs dessus:

$.ajax({ 
    url: '/test.html', 
    success: function(result) { 
     // select an element that has id=someElement in the returned html 
     var someElement = $(result).find('#someElement'); 
     // TODO: do something with the element 
    } 
}); 

Answer 3

Si la page Web en question vit sur un autre serveur, vous ne serez pas en mesure d'utiliser les AJAX pour avoir accès au HTML retourné en raison de problèmes avec la même politique d'origine. Le seul type de données que vous pourrez obtenir via AJAX à partir d'un autre serveur est JSONP. Ceci utilise une étiquette de script pour charger les données et fonctionner avec lui en utilisant un rappel javascript. L'autre façon de gérer un autre site consiste à demander à votre serveur de faire une demande de proxy, c'est-à-dire d'appeler une méthode sur votre serveur qui, à son tour, effectue la demande réelle pour vous. Si vous accédez au même serveur, je vous suggère de configurer certaines méthodes serveur pour renvoyer uniquement le code HTML que vous souhaitez injecter sur la page plutôt que de charger et d'analyser une page entière pour obtenir uniquement quelques éléments.