Résumé des exemples de syntaxe Ajax dans Jquery-js tutoriel-php.cn

Résumé des exemples de syntaxe Ajax dans Jquery

伊谢尔伦

Libérer： 2017-06-16 10:32:02

original

1676 Les gens l'ont consulté

Dans le développement de logiciels Java, en arrière-plan, nous pouvons encapsuler le code via divers frameworks, tels que SSH, etc. , ce qui nous facilite l'écriture de code Java. Par exemple, Struts et SpringMVC encapsulent et contrôlent le processus depuis la réception jusqu'à l'action, de sorte que nous n'avons besoin que d'effectuer quelques configurations simples pour y parvenir tandis que Spring encapsule la gestion de divers objets ; , Il fournit une méthode de programmation AOP, ce qui nous facilite grandement ; tandis qu'hibernate et IBatis encapsulent le code JDBC, et nous n'avons pas besoin d'écrire du code JDBC répétitif et compliqué à chaque fois.

A la réception, pour certains effets de page, vérification, etc., nous utilisons tous le langage JavaScript pour le compléter, mais c'est aussi comme notre Java Le code est le même, c'est le langage front-end le plus basique, et jQuery encapsule le code js pour faciliter l'écriture de notre code front-end, et il a également un très gros avantage pour résoudre la compatibilité du navigateur problème, c'est pourquoi nous l'utilisons. Une des raisons très importantes.

Et maintenant afin de répondre aux besoins des utilisateurs, Ajax (Javascript asynchrone + XML) L'actualisation asynchrone joue un rôle incomparable Dans le passé, lors de l'écriture d'Ajax. opérations, c'était toujours Nous devons effectuer plusieurs étapes nécessaires comme le code JDBC :

AJAX - l'objet XMLHttpRequest de base, et JQuery encapsule également les opérations asynchrones Ajax. Voici quelques méthodes couramment utilisées. $.post, $.ajax, $.get, $.getJSON.

Résumé des exemples de syntaxe Ajax dans Jquery

1. $.post, cette fonction encapsule en fait davantage $.ajax, ce qui réduit les paramètres simplifie l'opération, mais le le champ d’application est plus restreint. $.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 du contenu de retour, xml, html, script, json, text,_default.

2. $.ajax, c'est l'étape la plus élémentaire pour JQuery pour encapsuler ajax. En utilisant cette fonction, toutes les fonctions de communication asynchrone peuvent être complétées. 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 :

var configObj = {

méthode //Méthode de soumission des données : get et post

url //Chemin de soumission des données

async //Que l'actualisation asynchrone soit prise en charge, la valeur par défaut est vraie

data //Données qui doivent être soumises

dataType //Le type de données renvoyées par le serveur, telles que XML, String, Json, etc.

success //La fonction de rappel après une requête réussie

error //La fonction de rappel après une requête échouée

}

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

OK, regardons un exemple pratique, regardons un exemple de suppression asynchrone :

[javascript]

"font-size:18px;"> 🎜> $.ajax({

tapez :
"POST"
,
/ /Méthode de soumission

URL : "${pageContext.request.contextPath}/org/doDelete.action",//Path

données : {

"org.id" : "${ org.id}"

                                                                                                                     🎜>
Succès :
fonction
(résultat) {
//Les données renvoyées seront traitées en conséquence en fonction du résultat                                                                                                                           $(
"# tipMsg"
).text(
"Supprimer les données avec succès"
);

${org.id}"
,
true); $(
"#tipMsg"
).text(
"Échec de la suppression des données"
);



});

3. $.get, comme $.post, cette fonction encapsule les données soumises de la méthode get et ne peut être utilisée que pour résoudre l'actualisation asynchrone en utilisant les données soumises get. la même chose que C'est à peu près la même chose 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 qui enregistre l'utilisateur : 🎜>

. "font-size:18px;"> $(fonction(){

) { //Traitement des fonctions qui devaient être effectuées auparavant

$("tipMsg").text("Les données sont en cours d'enregistrement, veuillez patienter..." );

$("#insertBtn").attr("désactivé", true);

réussite : fonction(résultat ) {//Renvoyer la fonction de rappel requise après succès

"#tipMsg"

).text("Organisation enregistrée avec succès");

//Voici l'arbre correspondant, qui sera présenté ultérieurement,

> var arbre = fenêtre. parent.treeFrame.tree;

tree.insertNewChild("${org.id}", result.id, result.name);

sg").text ("Échec de l'enregistrement de l'organisation") > désactivé"

false

);

clearForm : vrai

}

'#orgForm'

).ajaxForm(options);

//Grâce à la méthode ajaxForm dans Jquery.Form Submit

});

De cette façon, nous n'avons plus besoin d'encapsuler les données, ce qui simplifie grandement notre opération ajax et notre opération de rafraîchissement asynchrone. 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. L'apprentissage de la programmation consiste en fait à apprendre à transférer et à traiter des données, à les obtenir à la réception, à les transférer au serveur pour un traitement correspondant, puis à les renvoyer pour un affichage pertinent. En mettant en œuvre ce processus à travers certaines technologies, le développement de. le logiciel est terminé. Cela semble toujours très intéressant.

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!