Maison > interface Web > js tutoriel > Explication détaillée des exemples de types de paramètres de données de jQuery.Ajax()

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

小云云
Libérer: 2017-12-31 16:17:23
original
1744 Les gens l'ont consulté

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>
Copier après la connexion

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:&#39;UserAdd.action&#39;,
      data:user,
      type:&#39;post&#39;,
      dataType:&#39;text&#39;,
      success:function(msg){
        if(msg==&#39;1&#39;){
          console.log(&#39;添加成功&#39;);
        }else{
          console.log(&#39;添加失败&#39;)
        }
      }
       
    })
  }
Copier après la connexion

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


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

Cela ne semble pas être utile.

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


var arr = $(&#39;#addForm&#39;).serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"
Copier après la connexion

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:&#39;vic&#39;,mobileIpt:&#39;110&#39;,birthday:&#39;2013-11-11&#39;});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"
Copier après la connexion

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


$.param([{uanme:&#39;vic&#39;},{mobileIpt:&#39;110&#39;},{birthday:&#39;2013-11-11&#39;}]);
"undefined=&undefined=&undefined="
Copier après la connexion

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 );
    }
  }
Copier après la connexion

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"
Copier après la connexion

Objet 2.json :


{uanme:&#39;vic&#39;,mobileIpt:&#39;110&#39;,birthday:&#39;2013-11-11&#39;}
Copier après la connexion

Tableau 3.json :


[
  {"name":"uname","value":"alice"},
  {"name":"mobileIpt","value":"110"},  
  {"name":"birthday","value":"2012-11-11"}
]
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal