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
Remplacer les caractères de chaîne en javascriptRemplacer les caractères de chaîne en javascriptMar 11, 2025 am 12:07 AM

Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi

8 Superbes plugins de mise en page JQuery Page8 Superbes plugins de mise en page JQuery PageMar 06, 2025 am 12:48 AM

Tirez parti de jQuery pour les dispositions de page Web sans effort: 8 plugins essentiels JQuery simplifie considérablement la mise en page de la page Web. Cet article met en évidence huit puissants plugins jQuery qui rationalisent le processus, particulièrement utile pour la création de sites Web manuels

Créez vos propres applications Web AjaxCréez vos propres applications Web AjaxMar 09, 2025 am 12:11 AM

Vous voici donc, prêt à tout savoir sur cette chose appelée Ajax. Mais qu'est-ce que c'est exactement? Le terme Ajax fait référence à un regroupement lâche de technologies utilisées pour créer un contenu Web interactif dynamique. Le terme Ajax, inventé à l'origine par Jesse J

10 feuilles de triche mobiles pour le développement mobile10 feuilles de triche mobiles pour le développement mobileMar 05, 2025 am 12:43 AM

Ce message compile des feuilles de triche utiles, des guides de référence, des recettes rapides et des extraits de code pour le développement d'Android, BlackBerry et Iphone. Aucun développeur ne devrait être sans eux! Guide de référence sur les gestes touchés (PDF) Une ressource précieuse pour Desig

Améliorez vos connaissances jQuery avec le spectateur sourceAméliorez vos connaissances jQuery avec le spectateur sourceMar 05, 2025 am 12:54 AM

JQuery est un excellent cadre JavaScript. Cependant, comme pour n'importe quelle bibliothèque, il est parfois nécessaire de passer sous le capot pour découvrir ce qui se passe. C'est peut-être parce que vous tracez un bug ou que vous êtes simplement curieux de savoir comment jQuery réalise une interface utilisateur particulière

10 JQUERY FUN ET PLIGINS DE GAMES10 JQUERY FUN ET PLIGINS DE GAMESMar 08, 2025 am 12:42 AM

10 plugins de jeu JQuery amusants pour rendre votre site Web plus attrayant et améliorer l'adhérence des utilisateurs! Bien que Flash soit toujours le meilleur logiciel pour développer des jeux Web occasionnels, JQuery peut également créer des effets surprenants, et bien qu'il ne soit pas comparable aux jeux Flash Pure Action, dans certains cas, vous pouvez également vous amuser inattendu dans votre navigateur. jeu jquery tic toe Le "Hello World" de la programmation de jeux a désormais une version jQuery. Code source JQUERY Crazy Word Composition Game Il s'agit d'un jeu de remplissage, et il peut produire des résultats étranges en raison de ne pas connaître le contexte du mot. Code source Jeu de balayage de la mine jQuery

Comment créer et publier mes propres bibliothèques JavaScript?Comment créer et publier mes propres bibliothèques JavaScript?Mar 18, 2025 pm 03:12 PM

L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.

Tutoriel JQuery Parallax - Contexte d'en-tête animéTutoriel JQuery Parallax - Contexte d'en-tête animéMar 08, 2025 am 12:39 AM

Ce tutoriel montre comment créer un effet de fond de parallaxe captivant à l'aide de jQuery. Nous allons construire une bannière d'en-tête avec des images en couches qui créent une profondeur visuelle étonnante. Le plugin mis à jour fonctionne avec jQuery 1.6.4 et plus tard. Télécharger le

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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP

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.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft