Différence entre $ .ajax () et $ .get () et $ .load ()


Réponses:


241

$.ajax()est le plus configurable, où vous obtenez un contrôle fin sur les en-têtes HTTP et autres. Vous pouvez également accéder directement à l'objet XHR en utilisant cette méthode. Une gestion des erreurs légèrement plus fine est également fournie. Peut donc être plus compliqué et souvent inutile, mais parfois très utile. Vous devez gérer vous-même les données renvoyées avec un rappel.

$.get()est juste un raccourci pour $.ajax()mais résume certaines des configurations, définissant des valeurs par défaut raisonnables pour ce qu'il vous cache. Renvoie les données à un rappel. Il n'autorise que les requêtes GET et est donc accompagné de la $.post()fonction pour une abstraction similaire, uniquement pour POST

.load()est similaire à $.get()mais ajoute une fonctionnalité qui vous permet de définir où dans le document les données renvoyées doivent être insérées. Donc vraiment utilisable uniquement lorsque l'appel se traduira par du HTML. Il est appelé légèrement différemment des autres appels, globaux, car il s'agit d'une méthode liée à un élément DOM spécifique enveloppé de jQuery. Par conséquent, on ferait:$('#divWantingContent').load(...)

Il convient de noter que tous $.get(), $.post(), .load()sont tous que des emballages pour $.ajax()comme on l'appelle en interne.

Plus de détails dans la documentation Ajax de jQuery: http://api.jquery.com/category/ajax/


3
@UzairAli non, il prend littéralement les variables que vous lui passez et les utilise pour exécuter jQuery.ajax ()
lisburnite

1
Génial, le .load () est simplement du HTML et le .get () est utile pour plus de choses.
Luigi Lopez

30

Les méthodes fournissent différentes couches d'abstraction.

  • $.ajax()vous donne un contrôle total sur la requête Ajax. Vous devriez l'utiliser si les autres méthodes ne répondent pas à vos besoins.

  • $.get()exécute une GETrequête Ajax . Les données renvoyées (qui peuvent être n'importe quelle donnée) seront transmises à votre gestionnaire de rappel.

  • $(selector).load()exécutera une GETrequête Ajax et définira le contenu des données renvoyées sélectionnées (qui doivent être du texte ou du HTML).

La méthode à utiliser dépend de la situation. Si vous voulez faire des choses simples, vous n'avez pas à vous en préoccuper $.ajax().

Par exemple, vous n'utiliserez pas $.load(), si les données renvoyées seront JSON qui doivent être traitées ultérieurement. Ici, vous utiliseriez $.ajax()ou $.get().


9

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

jQuery.ajax()

Description: exécutez une requête HTTP (Ajax) asynchrone.

Le monty complet, vous permet de faire n'importe quel type de requête Ajax.


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

jQuery.get()

Description: chargez les données du serveur à l'aide d'une requête HTTP GET.

Vous permet uniquement de faire des requêtes HTTP GET, nécessite un peu moins de configuration.


http://api.jquery.com/load/

.load()

Description: chargez les données du serveur et placez le code HTML renvoyé dans l'élément correspondant.

Spécialisé pour obtenir des données et les injecter dans un élément.


8

Très basique mais

  • $.load(): Chargez un morceau de html dans un conteneur DOM.
  • $.get(): Utilisez cette option si vous souhaitez passer un appel GET et jouer de manière intensive avec la réponse.
  • $.post(): Utilisez ceci si vous voulez faire un appel POST et ne voulez pas charger la réponse dans un DOM de conteneur.
  • $.ajax(): Utilisez ceci si vous avez besoin de faire quelque chose quand XHR échoue, ou si vous devez spécifier des options ajax (par exemple cache: true) à la volée.

5

Remarque importante: la méthode jQuery.load () peut non seulement faire des requêtes GET mais également POST , si le paramètre data est fourni (voir: http://api.jquery.com/load/ )

Type de données : PlainObject ou String Un objet ou une chaîne simple qui est envoyé au serveur avec la demande.

Méthode de demande La méthode POST est utilisée si les données sont fournies en tant qu'objet; sinon, GET est supposé.

Example: pass arrays of data to the server (POST request)
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

3

Tout le monde a raison. Les fonctions .load, .getet .post, sont différentes manières d'utiliser la fonction .ajax.

Personnellement, je trouve la fonction brute .ajax très déroutante et je préfère utiliser load, get ou post quand j'en ai besoin.

POST a la structure suivante:

$.post(target, post_data, function(response) { });

GET a les éléments suivants:

$.get(target, post_data, function(response) { });

LOAD a les caractéristiques suivantes:

$(*selector*).load(target, post_data, function(response) { });

Comme vous pouvez le voir, il y a peu de différences entre eux, car c'est la situation qui détermine lequel utiliser. Besoin d'envoyer les informations dans un fichier en interne? Utilisez .post (ce serait la plupart des cas). Besoin d'envoyer les informations de telle sorte que vous puissiez fournir un lien vers le moment spécifique? Utilisez .get. Les deux permettent un rappel où vous pouvez gérer la réponse des fichiers.

Une note importante est que .load agit de deux manières différentes. Si vous ne fournissez que l'url du document cible, il agira comme un get (et je dis agir parce que j'ai testé la vérification $_POSTdans le PHP appelé tout en utilisant le comportement .load par défaut et il détecte$_POST , non $_GET; peut-être que ce serait plus précis pour dire qu'il agit comme .post sans aucun argument); cependant, comme http://api.jquery.com/load/dit, une fois que vous avez fourni un tableau d'arguments à la fonction, les informations seront POSTÉES dans le fichier. Quoi qu'il en soit, la fonction .load insérera directement les informations dans un élément DOM, ce qui dans BEAUCOUP de cas est très lisible et très direct; mais fournit toujours un rappel si vous voulez faire quelque chose de plus avec la réponse. De plus, .load vous permet d'extraire un certain bloc de code d'un fichier, vous donnant la possibilité d'enregistrer un catalogue, par exemple, dans un fichier html, et d'en récupérer des morceaux (éléments) directement dans des éléments DOM.



1

Les deux sont utilisés pour envoyer des données et recevoir des réponses en utilisant ces données.

GET : récupère les informations stockées sur le serveur. (c.-à-d. recherche, tweet, informations sur la personne). Si vous souhaitez envoyer des informations, obtenez une demande d'envoi de demande en utilisant process.php?name=subrotoDonc, cela envoie essentiellement des informations via l'URL. L'URL ne peut pas gérer plus de 2036 caractères. Donc, pour un article de blog, vous souvenez-vous que ce n'est pas possible?

POST : Post fait la même chose que GET. Enregistrement de l'utilisateur, connexion de l'utilisateur, envoi de données volumineuses, article de blog. Si vous avez besoin d'envoyer des informations sécurisées, utilisez la poste ou pour le Big Data car elles ne passent pas par l'URL.

AJAX : $.get()et $.post()contiennent des fonctionnalités qui sont des sous-ensembles de $.ajax(). Il a plus de configuration.

$.get ()méthode, qui est une sorte de raccourci pour $.ajax(). Lors de l'utilisation $.get (), au lieu de passer un objet, vous passez des arguments. Au minimum, vous aurez besoin des deux premiers arguments, qui sont l'URL du fichier que vous souhaitez récupérer (par exemple, test.txt) et un rappel de réussite.


0

Tout le monde a très bien expliqué le sujet. Il y a un autre point que je voudrais ajouter à propos de la méthode .load ().

Comme pour le document de chargement, si vous ajoutez un sélecteur suffixé dans l'URL de données, il n'exécutera pas de scripts lors du chargement du contenu.

Plunker de travail

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html #content");
            })

D'autre part, après avoir supprimé le sélecteur dans l'url, les scripts du nouveau contenu s'exécuteront. Essayez cet exemple

après avoir supprimé #content dans l'url du fichier index.html

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html");
            })

Il n'y a pas de telle fonctionnalité intégrée fournie par d'autres méthodes dans la discussion.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.