Comment utiliser ajax spécifiquement ? Introduction aux opérations spécifiques utilisant ajax

Cet article vous indique principalement les détails d'utilisation spécifiques de ajax, et il existe des exemples à expliquer en détail. Lisons maintenant cet article ensemble

Dans le développement de logiciels Java, nous pouvons encapsuler le code via divers frameworks en arrière-plan, tels que SSH, etc., pour faciliter notre é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 de quelques configurations simples pour y parvenir ; tandis que Spring encapsule la gestion de divers objets et fournit des méthodes de programmation AOP, ce qui est très pratique ; pour nous ; Hibernate et IBatis encapsulent le code JDBC et ne nous obligent pas à écrire du code JDBC répétitif et compliqué à chaque fois.

Quant au front-end, 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, c'est le langage frontal le plus basique, et JQuery encapsule le code js pour faciliter l'écriture de notre code front-end, et il 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 très importantes pour lesquelles nous l'utilisons.

Et désormais afin de répondre aux besoins des utilisateurs, Ajax (Javascript asynchrone + XML)Le rafraîchissement asynchrone a joué un rôle incomparable. Dans le passé, l'écriture d'opérations Ajax nous obligeait toujours à effectuer plusieurs étapes nécessaires comme le code JDBC :

AJAX - objet XMLHttpRequest de base , et JQuery prend également en charge les opérations asynchrones Ajax. sont encapsulés Voici quelques méthodes couramment utilisées. $.ajax, $.post, $.get, $.getJSON.

1. $.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 effectuer des opérations d’actualisation asynchrones via cette méthode 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 :                                                                                                                                                                                   >

url //Chemin de soumission des données

async // Si l'actualisation asynchrone est pris en charge, la valeur par défaut est true

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);//Appel via la fonction $.ajax.

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

<span style="font-size:18px;">          // 删除  
                $.ajax({  
                    type : "POST",  //提交方式  
                    url : "${pageContext.request.contextPath}/org/doDelete.action",//路径  
                    data : {  
                        "org.id" : "${org.id}"  
                    },//数据，这里使用的是Json格式进行传输  
                    success : function(result) {//返回数据根据结果进行相应的处理  
                        if ( result.success ) {  
                            $("#tipMsg").text("删除数据成功");  
                            tree.deleteItem("${org.id}", true);  
                        } else {  
                            $("#tipMsg").text("删除数据失败");  
                        }  
                    }  
                });  
</span>

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 du 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]. (Si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Colonne Manuel de développement AJAX pour apprendre)

En fait, je sais la méthode $.ajax, et autres Tout le monde peut l'utiliser, c'est tout de même, 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 le volume de données de la page est relativement important ? 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 :

<span style="font-size:18px;">  $(function(){  
        var options = {  
            beforeSubmit : function() {//处理以前需要做的功能  
                $("tipMsg").text("数据正在保存，请稍候...");  
                $("#insertBtn").attr("disabled", true);  
            },  
            success : function(result) {//返回成功以后需要的回调函数  
                if ( result.success ) {  
                    $("#tipMsg").text("机构保存成功");  
                                       //这里是对应的一棵树，后边会介绍到，  
                    // 控制树形组件，增加新的节点  
                    var tree = window.parent.treeFrame.tree;  
                    tree.insertNewChild("${org.id}", result.id, result.name);  
                } else {  
                    $("#tipMsg").text("机构保存失败");  
                }  
                // 启用保存按钮  
                $("#insertBtn").attr("disabled", false);  
            },  
            clearForm : true  
    };  
  
     $(&#39;#orgForm&#39;).ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交  
   });  
</span>

     这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作，感觉使用多了，和form表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发，感觉还是非常有意思的。

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

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!