Une explication de l'encapsulation ajax dans JQuery-js tutoriel-php.cn

Une explication de l'encapsulation ajax dans JQuery

巴扎黑

Libérer： 2017-07-23 14:51:09

original

1088 Les gens l'ont consulté

Pour certains effets de page, vérification, etc., nous utilisons tous le langage JavaScript pour le compléter, mais c'est aussi comme notre code Java, qui est le langage frontal le plus basique, et jQuery est un moyen pratique d'encapsuler js code L'écriture de notre code front-end présente également un très gros avantage pour résoudre les problèmes de compatibilité des navigateurs, ce qui est l'une des raisons pour lesquelles il est très important pour nous de l'utiliser.

Désormais, afin de répondre aux besoins des utilisateurs, l'actualisation asynchrone Ajax (Asynchronous JavaScript + XML) joue un rôle incomparable. Dans le passé, l'écriture d'opérations Ajax nous obligeait toujours à effectuer plusieurs étapes nécessaires comme les étapes du code JDBC. : AJAX - l'objet XMLHttpRequest principal, et jQuery encapsule également les opérations asynchrones Ajax. Voici quelques méthodes courantes.

$.ajax, $.post, $.get, $.getJSON.

1. $.ajax, c'est l'étape la plus élémentaire pour que jquery encapsule ajax. Elle peut être complétée par. en utilisant cette fonction Toutes les fonctionnalités de la communication asynchrone. En d’autres termes, nous pouvons utiliser cette méthode pour effectuer des opérations de rafraîchissement asynchrone en toutes circonstances. Mais il comporte de nombreux paramètres, ce qui peut parfois être un peu gênant. Jetez un œil aux paramètres couramment utilisés :

asynchrone // La prise en charge de l'actualisation asynchrone est-elle vraie par défaut
data // Données qui doivent être soumis
dataType // Le type de données renvoyées par le serveur, telles que xml, String, Json, etc.
Succès //Fonction de rappel après requête réussie
erreur //Fonction de rappel après échec de requête
}

$.ajax(configObj);//Appelez via la fonction $.ajax.

OK, jetons un œil à un exemple pratique de suppression asynchrone :

"font-size:18px;">

tapez :

"POST",

url :
"${pageContext. request.contextPath}/org/doDelete.action",
données : { , utilisé ici La transmission est au format Json
Succès : fonction(résultat) { //Les données renvoyées seront traitées en conséquence
$(
"Supprimer les données avec succès");
tree.deleteItem("${org.id}", true);
else {
🎜> }); 🎜> 🎜>

Deuxièmement, $.post, cette fonction est en fait une encapsulation supplémentaire de $.ajax, réduisant les paramètres et simplifiant les opérations, mais le champ d'application est plus petit. $.post simplifie la méthode de soumission des données et ne peut être soumis que via POST. Le serveur n'est accessible que de manière asynchrone, et non synchrone, et la gestion des erreurs ne peut pas être effectuée. Dans ces circonstances, nous pouvons utiliser cette fonction pour faciliter notre programmation. Ses principaux paramètres, tels que méthode, async, etc., sont définis par défaut et nous ne pouvons pas les modifier. Les exemples ne seront pas présentés à nouveau.

url : Envoyer l'adresse de la demande.

data : Paramètres clé/valeur à envoyer.

callback : fonction de rappel lors d'un envoi réussi.

type : format de contenu de retour, xml, html, script, json, text,_default.

3. $.get, comme $.post, cette fonction encapsule les données soumises par la méthode get et ne peut être utilisée que pour soumettre des données dans get pour résoudre des problèmes asynchrones. rafraîchir En termes de méthode, la méthode d'utilisation est similaire à celle ci-dessus. Plus de démonstration ici.

Quatrièmement, $.getJSON, il s'agit d'une encapsulation supplémentaire, c'est-à-dire qu'elle opère sur le type de données de retour de Json. Il n'y a que trois paramètres que nous devons définir, qui sont très simples : url, [data], [callback].

En fait, une fois que vous connaissez la méthode $.ajax, vous pouvez utiliser tout le reste. Ils sont tous pareils. C'est en fait très simple.

Mais il y a un autre problème ici, qui est plus gênant, à savoir, que devons-nous faire si la quantité de données sur la page est relativement importante ? Dans le traitement des formulaires réguliers, nous utilisons le framework Struts2 pour obtenir automatiquement l'encapsulation via le mode piloté par domaine. Alors, comment encapsuler via ajax ? Ici, JQuery dispose d'un plug-in, Jquery Form. En introduisant ce fichier js, nous pouvons imiter le formulaire pour prendre en charge le mode piloté par domaine de Struts2 et effectuer une encapsulation automatique des données. L'utilisation est similaire à $.ajax. Jetons un coup d'œil à l'exemple réel. Voici un code frontal pour enregistrer l'utilisateur :
1. "font-size: 18px;"> $(function(){
2. > beforeSubmit : function () {
  //Traiter les fonctions qui doivent être effectuées avant
3. .text("Les données sont en cours d'enregistrement, veuillez patienter ...");
4. attr("disabled", true); success :
  function(result) {
6. $(
  " #tipMsg").text(
  "Organisation enregistrée avec succès");
8. 🎜>
9. tree.insertNewChild("${org.id}", result.id, result.name);
10. } else {
11. 🎜> } 🎜> $("#insertBtn").attr(
  "désactivé",
12. clearForm:
  vrai
13. }; 🎜>'#orgForm').ajaxForm(options);
  //Soumettre via la méthode ajaxForm dans Jquery.Form
14. }); > Il n'est pas nécessaire d'encapsuler les données, ce qui simplifie grandement nos opérations d'actualisation asynchrones telles que les opérations ajax. Pour résumer, l’opération ajax dans JQuery semble être beaucoup utilisée. Elle reste très similaire au traitement de formulaire, mais les fonctions implémentées sont différentes.
16. de