


Explication détaillée des exemples de types de paramètres de données de JQuery.Ajax()_jquery
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é se compose d'un tableau d'objets, dont chacun contient une ou deux paires nom-valeur : le paramètre name et le paramètre value (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() :
返回值:StringjQuery.param(obj,[traditional]) 将表单元素数组或者对象序列化。 参数 obj,[traditional] 数组或jQuery对象会按照name/value对进行序列化,普通对象按照key/value对进行序列化。 traditional:是否使用传统的方式浅层序列化。 demo: $.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".
ps : Résumé de l'utilisation du paramètre data de la méthode ajax dans jquery
$.ajax({ type: post, url: some.php, data: name=john&location=boston, //第一种方式传参 // data: {name:john,location:boston} //第二种方式传参 // data: {foo:[bar1, bar2]} 转换为 '&foo=bar1&foo=bar2' /* 第一种我们用url传参,参数里面如果加带&这个符号地话,可能参数接收不到或不完整, 如“ data: name=john&location=boston,” 如果name地值是john&smith这样写可能就会有问题, 我们可以用js里面地encodeuricomponent()方法进行转义, 但如果用data: {name:john,location:boston}这种方式写地话就不需要进行转义, 如果转义地话,接收地将是转义后地字符串 */ success: function(msg){ alert( data saved: + msg ); } });

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

Une fois que vous avez maîtrisé le didacticiel TypeScript de niveau d'entrée, vous devriez être en mesure d'écrire votre propre code dans un IDE qui prend en charge TypeScript et de le compiler en JavaScript. Ce tutoriel plongera dans divers types de données dans TypeScript. JavaScript a sept types de données: null, non défini, booléen, numéro, chaîne, symbole (introduit par ES6) et objet. TypeScript définit plus de types sur cette base, et ce tutoriel les couvrira tous en détail. Type de données nuls Comme javascript, null en typeScript

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

JavaScript peut être exécuté dans PowerPoint et peut être implémenté en appelant des fichiers JavaScript externes ou en intégrant des fichiers HTML via VBA. 1. Pour utiliser VBA pour appeler les fichiers JavaScript, vous devez activer les macros et avoir des connaissances en programmation VBA. 2. ENCHED des fichiers HTML contenant JavaScript, qui sont simples et faciles à utiliser mais sont soumis à des restrictions de sécurité. Les avantages incluent les fonctions étendues et la flexibilité, tandis que les inconvénients impliquent la sécurité, la compatibilité et la complexité. En pratique, l'attention doit être accordée à la sécurité, à la compatibilité, aux performances et à l'expérience utilisateur.
