Utiliser JQuery pour faire fonctionner Ajax (avec étui)

Cette fois, je vais vous présenter l'utilisation de JQuery pour faire fonctionner Ajax (avec étui). Quelles sont les précautions pour utiliser JQuery pour faire fonctionner Ajax. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 et SpringMVC peuvent traiter le processus à partir du. réception à l'action. Le contrôle de l'encapsulation nous permet de l'implémenter avec seulement quelques configurations simples ; spring encapsule la gestion de divers objets et fournit des méthodes de programmation AOP, ce qui nous facilite grandement pendant qu'hibernate et IBatis implémentent le code JDBC. écrivez 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 maintenant, 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 nécessaires comme le code JDBC. Étapes :

AJAX - objet XMLHttpRequest de base, 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. 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.

                                                                                                                                                                                                                        Eh bien, jetons un coup d'œil à un exemple pratique, regardons un exemple de suppression asynchrone : l'encapsulation réduit les paramètres et simplifie l'opération, 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, pas de manière synchrone, et la

gestion des erreurs

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

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 de la méthode get. Elle ne peut être utilisée que pour obtenir les données soumises pour résoudre l'actualisation asynchrone. presque comme ci-dessus. Plus de démonstration ici.

Quatrièmement, $.getJSON, il s'agit d'une encapsulation supplémentaire, c'est-à-dire que le

type de données renvoyé

est 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 ici un autre problème, 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

Form

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 
  }; 
  $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交 
 }); 
</span>

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery内init构造器使用详解

jQuery动态操作div步骤详解

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!