recherche
Maisoninterface Webjs tutorielUne introduction aux méthodes de jQuery sténographiques ajax

An Introduction to jQuery's Shorthand Ajax Methods

Points de base

  • Abréviation jQuery La méthode AJAX fournit une méthode qui simplifie les appels AJAX, qui enveloppe la méthode $.ajax() à un usage spécifique à l'aide d'une configuration prédéfinie. Les méthodes discutées dans cet article incluent load(), $.post() et $.get().
  • La méthode
  • load() permet de charger des données à partir du serveur et placées dans l'élément sélectionné. Il utilise des URL, des données facultatives et des fonctions de rappel facultatives. Cette méthode peut être utilisée pour charger le contenu principal d'une page Web de manière asynchrone.
  • La méthode
  • $.post() est utilisée pour envoyer une demande de poste au serveur et envoyer des données dans le cadre du corps de la demande. Cette méthode est idéale pour les demandes qui peuvent entraîner des modifications de l'état côté serveur.
  • La méthode
  • $.get() initie une demande GET au serveur, ce qui est idéal pour les situations où le serveur renvoie toujours le même résultat pour un ensemble de paramètres donné ou où l'utilisateur doit partager des ressources.

N'avez-vous jamais entendu parler du terme Ajax? Je parie que presque les mains de tout le monde sont posées, près de leur corps. Ajax (initialement signifie Asynchrone JavaScript et XML) est l'une des méthodes client les plus couramment utilisées qui contribuent à créer des sites Web et des applications Web asynchrones.

Bien sûr, vous pouvez utiliser JavaScript brut pour exécuter des appels AJAX, mais il peut être difficile de gérer toutes les différentes parties du code. Cela est particulièrement vrai si vous devez prendre en charge les anciens navigateurs comme Internet Explorer 6.

Heureusement, JQuery nous fournit un ensemble de façons de faire face à ces problèmes, nous permettant de nous concentrer sur les tâches que nous voulons accomplir avec notre code. JQuery fournit une méthode principale $.ajax() qui peut être fortement configurée pour répondre à l'un de vos besoins. Il fournit également un ensemble de méthodes d'abréviation appelées méthodes d'abréviation, car ce ne sont que des emballages de méthodes $.ajax() avec des configurations prédéfinies, chacune servant un seul objectif.

En dehors de la méthode $.ajax(), toutes les méthodes ont une chose en commun: elles ne fonctionnent pas sur un ensemble d'éléments DOM, mais sont appelés directement à partir d'un objet jQuery. Par conséquent, nous n'écrivons pas de déclarations comme ceci:

$('p').ajax(...);

Cela sélectionnera tous les paragraphes de la page, puis appellera la méthode ajax(), et écrivez à la place:

$.ajax(...);

Dans cet article, nous discuterons de trois méthodes d'abréviation JQuery les plus couramment utilisées: load(), $.post() et $.get().

LOAD ()

La première méthode dont nous discuterons est load(). Il nous permet de charger les données du serveur et de mettre les données renvoyées (généralement du code HTML) dans l'élément qui sélectionne la correspondance. Avant de l'utiliser, jetons un coup d'œil à sa signature:

load(url[, data][, callback])

La signification de chaque paramètre est la suivante:

  • url: une chaîne spécifiant l'URL de la ressource à laquelle vous souhaitez envoyer la demande;
  • : une chaîne facultative qui doit être une chaîne de requête bien formée, ou un objet qui doit être passé comme paramètre de demande. Si une chaîne est passée, la méthode de demande sera obtenue et si un objet est passé, la méthode de demande sera publiée. Si ce paramètre est omis, la méthode GET est utilisée; data
  • : Une fonction de rappel facultative appelée une fois la demande AJAX terminée. Cette fonction accepte jusqu'à trois paramètres: texte de réponse, chaîne d'état demandée et instance JQXHR. À l'intérieur de la fonction de rappel, le contexte (ceci) est défini par un sur chaque élément de la collection.
  • callback
  • Cela semble-t-il difficile à utiliser? Regardons un exemple spécifique.

Supposons que vous ayez un élément dans votre site Web avec l'ID Main, qui représente le contenu principal. Ce que nous voulons faire, c'est charger de manière asynchrone le contenu principal de la page référencée dans le lien dans le menu principal, idéalement, son identifiant est le menu principal. Nous voulons juste récupérer le contenu à l'intérieur de cet élément, car le reste de la disposition ne changera pas, ils ne doivent donc pas être chargés.

Cette approche est destinée à une amélioration car si les utilisateurs visitant le site Web ont un JavaScript désactivé, ils peuvent toujours parcourir le site Web en utilisant le mécanisme de synchronisation habituel. Nous voulons implémenter cette fonctionnalité car elle peut améliorer les performances du site Web. Dans cet exemple, nous supposons que tous les liens du menu sont des liens internes.

En utilisant les méthodes jQuery et

, nous pouvons terminer cette tâche avec le code suivant:

load()

attendez! Pouvez-vous voir ce qui ne va pas avec ce code? Certains d'entre vous peuvent remarquer que ce code récupère tout le code HTML
$('p').ajax(...);
de la page référencée, pas seulement le contenu principal. L'exécution de ce code entraînera quelque chose comme avoir deux miroirs, l'un devant l'autre: vous voyez un miroir à l'intérieur d'un miroir, à l'intérieur d'un miroir, etc. Ce que nous voulons vraiment, c'est de charger le contenu principal de la page cible.

Pour résoudre ce problème, jQuery nous permet d'ajouter un sélecteur immédiatement après l'URL spécifié. En utilisant cette fonction de la méthode , nous pouvons réécrire le code précédent pour:

Cette fois, nous recherchons la page, puis filtrons le code HTML, injectant uniquement les descendants de l'élément avec ID Main. Nous incluons un sélecteur universel (

) parce que nous voulons éviter d'avoir des éléments #main à l'intérieur de l'élément #main; nous voulons seulement ce qui est à l'intérieur de #main, pas #main lui-même. load()

Cet exemple est bon, mais il ne montre que l'utilisation de l'un des paramètres disponibles. Jetons un coup d'œil à plus de code!
$.ajax(...);

Utilisez la fonction de rappel avec chargement () * Le paramètre de rappel

peut être utilisé pour informer l'utilisateur de l'achèvement de l'opération. Mettons à jour l'exemple précédent pour la dernière fois pour l'utiliser.

Cette fois, nous supposons que nous avons un élément avec une barre de notification ID et il sera utilisé comme ... eh bien, barre de notification.

Lorsque nous maîtrisons le

, tournons notre attention vers la méthode suivante.

load(url[, data][, callback])
$. Post ()

load()

Parfois, nous voulons injecter le contenu renvoyé par le serveur en un ou plusieurs éléments. Nous voulons peut-être récupérer les données, puis décider quoi en faire après la recherche des données. Pour ce faire, nous pouvons utiliser la méthode $.post() ou $.get().

Ils sont fonctionnellement similaires (faites une demande au serveur) et sont les mêmes en termes de signature et de paramètres acceptés. La seule différence est que l'un envoie une demande de poste et l'autre envoie une demande GET. De toute évidence, n'est-ce pas?

Si vous ne vous souvenez pas de la différence entre une demande de poste et une demande de GET, si notre demande peut faire changer un état côté serveur, ce qui entraîne différentes réponses, vous devez utiliser le message. Sinon, ce devrait être une demande de GET.

$.post() La signature de la méthode est:

$('p').ajax(...);

Les paramètres sont les suivants:

  • url: une chaîne spécifiant l'URL de la ressource à laquelle vous souhaitez envoyer la demande;
  • : une chaîne ou un objet facultatif que jQuery sera envoyé dans le cadre d'une demande de poste; data
  • : La fonction de rappel exécutée après la demande est réussie. À l'intérieur de la fonction de rappel, le contexte (this) est défini pour représenter l'objet qui représente les paramètres AJAX utilisés dans l'appel.
  • callback
  • : une chaîne facultative qui spécifie comment le corps de réponse est interprété. Les valeurs acceptées sont: HTML, Text, XML, JSON, Script et JSONP. Cela peut également être une chaîne de valeurs séparées plusieurs espaces. Dans ce cas, JQuery convertit un type à un autre. Par exemple, si la réponse est du texte et que nous voulons le traiter comme XML, nous pouvons écrire "texte XML". Si ce paramètre est omis, le texte de réponse sera transmis à la fonction de rappel sans aucun traitement ni évaluation, et jQuery fera de son mieux pour deviner le format correct.
  • type
  • Maintenant que vous savez ce que
peut faire et quels sont ses paramètres, écrivons du code.

$.post() Supposons que nous ayons un formulaire à remplir. Chaque fois qu'un champ perd la mise au point, nous voulons envoyer les données de champ au serveur pour vérifier sa validité. Nous supposerons que le serveur renvoie des informations au format JSON. Un cas d'utilisation typique consiste à vérifier que le nom d'utilisateur sélectionné par l'utilisateur n'a pas encore été occupé.

Pour implémenter cette fonction, nous pouvons utiliser la méthode

de jQuery comme suit:

$.post()

Dans ce code, nous envoyons une demande de poste à la page identifiée par l'URL relative "/ utilisateur". Nous utilisons également les données du deuxième paramètre pour envoyer au serveur le nom et la valeur du champ qui perd la focalisation. Enfin, nous utilisons une fonction de rappel pour vérifier que la valeur de l'attribut d'état de l'objet JSON renvoyé est une erreur, auquel cas nous affichons le message d'erreur (stocké dans l'attribut de message) à l'utilisateur.
$.ajax(...);

pour vous donner une meilleure compréhension de ce à quoi pourrait ressembler ce type d'objet JSON, voici un exemple:

Comme je l'ai dit,
load(url[, data][, callback])
est le même que

sauf pour pouvoir faire des demandes de recettes. Ainsi, la section suivante sera très courte et je me concentrerai sur certains cas d'utilisation au lieu de répéter les mêmes informations. $.get() $.post()

$. Get ()

$.get() est l'une des méthodes fournies par jQuery pour émettre des demandes. Cette méthode initie une demande GET au serveur à l'aide de l'URL spécifiée et des données facultatives fournies. Une fois la demande terminée, il peut également exécuter la fonction de rappel. Sa signature est la suivante:

$('p').ajax(...);
Les paramètres

sont les mêmes que ceux de la méthode $.post(), donc je ne les répéterai pas ici.

Les fonctions

$.get() sont idéales pour les cas où le serveur renvoie toujours le même résultat pour un ensemble de paramètres donné. C'est également un bon choix pour les ressources que vous souhaitez que les utilisateurs puissent partager. Par exemple, pour les services de transport (tels que les informations du calendrier de train), les personnes qui recherchent la même date et la même heure doivent obtenir les mêmes résultats, et une demande de GET est idéale. De plus, si la page peut répondre pour obtenir des demandes, les utilisateurs peuvent partager les résultats qu'ils obtiennent avec leurs amis - la magie des URL.

Conclusion

Dans cet article, nous discutons certaines des méthodes d'abréviation de l'AJAX les plus couramment utilisées pour jQuery. Ils sont un moyen très pratique d'effectuer des demandes Ajax, et comme nous pouvons le voir, dans leur version de base, il ne faut qu'une seule ligne de code pour réaliser ce que nous voulons.

Veuillez consulter la documentation Ajax Abréviation de JQuery pour plus d'informations sur ces méthodes et d'autres. Bien que nous ne discutions rien d'autre ici, vous devriez être en mesure d'utiliser les connaissances que vous avez acquises dans cet article pour commencer avec d'autres méthodes.

(La section FAQ doit être ajoutée ici, le contenu est le même que la section FAQ dans le texte d'entrée)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Node.js diffuse avec dactylographieNode.js diffuse avec dactylographieApr 30, 2025 am 08:22 AM

Node.js excelle dans des E / S efficaces, en grande partie grâce aux flux. Streams traite les données progressivement, en évitant la surcharge de mémoire - idéal pour les fichiers volumineux, les tâches réseau et les applications en temps réel. Combiner les flux avec la sécurité de type dactylographié crée un powe

Python vs JavaScript: considérations de performance et d'efficacitéPython vs JavaScript: considérations de performance et d'efficacitéApr 30, 2025 am 12:08 AM

Les différences de performance et d'efficacité entre Python et JavaScript se reflètent principalement dans: 1) comme un langage interprété, Python fonctionne lentement mais a une efficacité de développement élevée et convient au développement rapide des prototypes; 2) JavaScript est limité au thread unique dans le navigateur, mais les E / S multi-threading et asynchrones peuvent être utilisées pour améliorer les performances dans Node.js, et les deux ont des avantages dans les projets réels.

Les origines de JavaScript: explorer son langage d'implémentationLes origines de JavaScript: explorer son langage d'implémentationApr 29, 2025 am 12:51 AM

JavaScript est originaire de 1995 et a été créé par Brandon Ike, et a réalisé que la langue en langue C. 1.C offre des capacités de programmation élevées et au niveau du système pour JavaScript. 2. La gestion de la mémoire de JavaScript et l'optimisation des performances reposent sur le langage C. 3. La fonctionnalité multiplateforme du langage C aide JavaScript à s'exécuter efficacement sur différents systèmes d'exploitation.

Dans les coulisses: quel langage alimente JavaScript?Dans les coulisses: quel langage alimente JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript s'exécute dans les navigateurs et les environnements Node.js et s'appuie sur le moteur JavaScript pour analyser et exécuter du code. 1) Générer une arborescence de syntaxe abstraite (AST) au stade d'analyse; 2) Convertir AST en bytecode ou code machine à l'étape de compilation; 3) Exécutez le code compilé à l'étape d'exécution.

L'avenir de Python et Javascript: tendances et prédictionsL'avenir de Python et Javascript: tendances et prédictionsApr 27, 2025 am 12:21 AM

Les tendances futures de Python et JavaScript incluent: 1. Python consolidera sa position dans les domaines de l'informatique scientifique et de l'IA, 2. JavaScript favorisera le développement de la technologie Web, 3. Le développement de plate-forme multiplié deviendra un sujet brûlant, et 4. L'optimisation des performances sera le focus. Les deux continueront d'étendre les scénarios d'application dans leurs champs respectifs et de faire plus de percées dans les performances.

Python vs JavaScript: environnements et outils de développementPython vs JavaScript: environnements et outils de développementApr 26, 2025 am 12:09 AM

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

JavaScript est-il écrit en C? Examiner les preuvesJavaScript est-il écrit en C? Examiner les preuvesApr 25, 2025 am 12:15 AM

Oui, le noyau du moteur de JavaScript est écrit en C. 1) Le langage C fournit des performances efficaces et un contrôle sous-jacent, qui convient au développement du moteur JavaScript. 2) Prendre le moteur V8 comme exemple, son noyau est écrit en C, combinant l'efficacité et les caractéristiques orientées objet de C. 3) Le principe de travail du moteur JavaScript comprend l'analyse, la compilation et l'exécution, et le langage C joue un rôle clé dans ces processus.

Rôle de JavaScript: rendre le Web interactif et dynamiqueRôle de JavaScript: rendre le Web interactif et dynamiqueApr 24, 2025 am 12:12 AM

JavaScript est au cœur des sites Web modernes car il améliore l'interactivité et la dynamicité des pages Web. 1) Il permet de modifier le contenu sans rafraîchir la page, 2) manipuler les pages Web via Domapi, 3) prendre en charge les effets interactifs complexes tels que l'animation et le glisser-déposer, 4) Optimiser les performances et les meilleures pratiques pour améliorer l'expérience utilisateur.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

PhpStorm version Mac

PhpStorm version Mac

Le dernier (2018.2.1) outil de développement intégré PHP professionnel