Explication détaillée des exemples de types de paramètres de données de jQuery.Ajax()

Cet article présente principalement l'explication détaillée du type de paramètre de données de jQuery.Ajax(). Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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

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

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

Nous avions l'habitude de l'implémenter comme ceci :

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 difficile d'obtenir la valeur du élément de formulaire.... Il n'y a que trois éléments ici, et cela devient inutile quand il y a beaucoup d'éléments....

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

Sérialiser les éléments de table (similaire à la méthode '.serialize() ') renvoie les 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 ne semble pas être utile.

Nous utilisons JQuery.param () Jetons un coup d'œil à la méthode :

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

Hé, cela répond à nos besoins Bien que ce ne soit pas un type json, il peut au moins être téléchargé en tant que. 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])

Convertir le formulaire tableau d’éléments ou sérialisation d’objets.

Paramètres

obj,[traditionnel]

Les tableaux ou les objets jQuery seront sérialisés en fonction de paires nom/valeur, et les objets ordinaires seront sérialisés en fonction de 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 un. json array

$.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, nous comprenons s'il s'agit de données json, alors bouclez une par une et ne prenez que leurs attributs de nom et leur valeur. attributs pour épisser la chaîne de caractères.

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 dans

1.

"uname=alice&mobileIpt=110&birthday=1983-05-12"

Objet 2.json :

{uanme:'vic',mobileIpt:'110',birthday:'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"". javascript - acquisition php Au paramètre data, comment faire correspondre le tableau

Résumé de l'utilisation du paramètre data de la méthode ajax dans Jquery_jquery

Correction du paramètre formDdata du plug-in de formulaire jQuery Vérifiez le formulaire et soumettez-le après vérification_jquery

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!