Exemple d'analyse du type de paramètre de données d'Ajax() dans JQuery_jquery

Cet article analyse le type de paramètre de données d'Ajax() dans JQuery à travers des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

L'analyse précédente a brièvement présenté "Deux façons de transmettre des paramètres de données en ajax". Maintenant que nous avons une compréhension préliminaire des manières de transmettre des paramètres de données en ajax, analysons plus en détail les types de paramètres de données. en ajax.

Supposons qu'il existe maintenant un tel formulaire, qui est utilisé pour ajouter des éléments.

<form id='addForm' action='UserAdd.action' type='post'>
  <label for='uname'>用户名</label>：<input type='text' name='uname' id='uname'><br>
  <label for='mobileIpt'>手机号：</label><input type='text' name='mobileIpt' id='mobileIpt'><br>
  <label for='birthday'>生日：</label><input type='text' name='birthday'><br>
  <input type='button' value='提交' onclick='addUser()'>
</form>

Nous ne voulons pas utiliser le formulaire de soumission pour ajouter cet élément, nous voulons utiliser ajax pour soumettre.

Voici comment nous l'avons implémenté auparavant :

function addUser(){
  var user = {
   uname:$("#uname").val(),
   mobileIpt:$("#mobileIpt").val(),
   birthday:$("#birthday").val()
  };
  $.ajax({
   url:'UserAdd.action',
   data:user,
   type:'post',
   dataType:'text',
   success:function(msg){
    if(msg=='1'){
     console.log('添加成功');
    }else{
     console.log('添加失败')
    }
   }
  })
}

Il n'y a rien de mal à cela, mais c'est trop compliqué d'obtenir les valeurs des éléments de formulaire.... Il n'y a que trois éléments ici, et ce sera inutile s'il y a beaucoup d'éléments....

Jusqu'au jour où j'ai découvert la méthode serializeArray de jquery

Les éléments de table sérialisés (similaires à la méthode '.serialize()') renvoient des données de structure de données JSON.

Notez que cette méthode renvoie un objet JSON plutôt qu'une chaîne JSON. Vous devez utiliser un plug-in ou une bibliothèque tierce pour les opérations de stringification.

L'objet JSON renvoyé est composé d'un tableau d'objets, où chaque objet contient une ou deux paires nom-valeur - paramètre de nom et paramètre de valeur (si la valeur n'est pas vide).

Essayons

$('#addForm').serializeArray();
//返回数据结构，是json数组，每个对像分别name和value为key，代表这个表单元素的name和value
[
 {"name":"uname","value":""},
 {"name":"mobileIpt","value":""}, 
 {"name":"birthday","value":""}
]

Cela semble inutile

Utilisons la méthode JQuery.param() pour le gérer :

var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"

Hé, maintenant cela répond à nos besoins. Bien qu'il ne soit pas de type json, il peut au moins être téléchargé sous forme de données.

Ici, nous pouvons remplir directement le tableau json dans les données ajax et appeler $.param() dans jquery pour le traiter.

Regardons la description de la méthode jquery.param() :

Valeur de retour : StringjQuery.param(obj,[traditional])

Sérialisez le tableau ou l'objet d'éléments de formulaire.

Paramètres :

obj,[traditionnel]

Les tableaux ou les objets jQuery seront sérialisés selon des paires nom/valeur, et les objets ordinaires seront sérialisés selon des paires clé/valeur.

traditionnel : s'il faut utiliser la sérialisation superficielle traditionnelle.

démo :

$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"

En regardant la description, il semble que cela n'a rien à voir avec nous. Changeons-le en tableau json

$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="

Cette conversion échoue-t-elle ? Pourquoi les données de notre formulaire peuvent-elles être converties avec succès en paramètres d'URL ? Jetons un coup d'œil au code source de jquery

//在ajax()方法中，对json类型的数据进行了$.param()处理
if ( s.data && s.processData && typeof s.data !== "string" ) {
 s.data = jQuery.param( s.data, s.traditional );
}
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
  // Serialize the form elements
  jQuery.each( a, function() {
   add( this.name, this.value );
  });
 } else {
  // If traditional, encode the "old" way (the way 1.3.2 or older
  // did it), otherwise encode params recursively.
  for ( prefix in a ) {
   buildParams( prefix, a[ prefix ], traditional, add );
  }
 }

Maintenant, vous comprenez, s'il s'agit de données json, faites une boucle une par une et prenez uniquement leur attribut name et leur attribut value pour épisser la chaîne.

S'il s'agit d'un objet normal, bouclez les propriétés de l'objet puis concaténez les chaînes.

Résumé :

Donc, ce que cet article va dire, c'est que dans la fonction ajax de jquery, 3 types de données peuvent être transmises
1. Texte : "uname=alice&mobileIpt=110&birthday=1983-05-12"
Objet 2.json : {uanme:'vic',mobileIpt:'110',anniversaire:'2013-11-11'}
Tableau 3.json :

[
 {"name":"uname","value":"alice"},
 {"name":"mobileIpt","value":"110"}, 
 {"name":"birthday","value":"2012-11-11"}
]

Nous pouvons donc récupérer le formulaire et le soumettre en un seul clic, ce qui est très pratique.

Supplément :

En fait, pour extraire les données du formulaire, il vous suffit d'utiliser la méthode serialize() pour obtenir directement "uname=alice&mobileIpt=110&birthday=1983-05-12".

J'espère que cet article sera utile à tous ceux qui programment jQuery.