Exemple complet de partage d'opérations Ajax dans JQuery

Cet article présente principalement l'exemple complet du fonctionnement d'Ajax dans JQuery. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Dans le développement de logiciels Java, nous pouvons encapsuler le code en arrière-plan via divers frameworks, tels que SSH, etc., pour faciliter notre écriture de code Java, par exemple, Struts, SpringMVC, à partir du réception à l'action Le processus est encapsulé et contrôlé, de sorte qu'il suffit de faire quelques configurations simples pour y parvenir ; spring encapsule la gestion de divers objets et fournit une programmation AOP, ce qui nous facilite grandement alors qu'hibernate et IBatis sont du code JDBC ; l'encapsulation ne nous oblige pas à écrire du code JDBC répétitif et compliqué à chaque fois.

Quant à la réception, pour certains effets de page, vérification, etc., nous utilisons tous le langage JavaScript pour compléter, mais c'est aussi comme notre code Java, c'est le langage de réception 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.

Mais désormais, afin de répondre aux besoins des utilisateurs, le rafraîchissement 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 comme JDBC. code. Étapes nécessaires :

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 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 :

var configObj = {
  method //数据的提交方式：get和post
  url //数据的提交路劲
  async //是否支持异步刷新，默认是true
  data //需要提交的数据
  dataType //服务器返回数据的类型，例如xml,String,Json等
  success //请求成功后的回调函数
  error //请求失败后的回调函数
 }

$.ajax(configObj); // Appelé via la fonction $.ajax.

Bon, 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>

2. $.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 : Adresse d'envoi 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 résoudre l'actualisation asynchrone en soumettant des données avec 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. 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>

De cette façon, nous n'avons pas à traiter les données. Le traitement d'encapsulation des données simplifie grandement nos opérations de rafraîchissement asynchrone 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. L'apprentissage de la programmation consiste en fait à apprendre à transférer et à traiter des données, à les obtenir à la réception, à les transmettre 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.

Recommandations associées :

Comment jquery épisse le json et la chaîne d'ajax

Explication détaillée d'ajaxSubmit dans jQuery

JavaScript implémente la requête asynchrone Ajax Explication détaillée d'exemples

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!