recherche

Maison >interface Web >js tutoriel >Notes sur la sérialisation des formulaires jquery

Notes sur la sérialisation des formulaires jquery

小云云
小云云original
2017-12-31 09:39:491777parcourir

Cet article vous présente principalement les précautions concernant la sérialisation des formulaires jquery. L'article le présente en détail à travers l'exemple de code, qui a une certaine valeur de référence et d'apprentissage pour tous les amis qui en ont besoin peuvent suivre l'éditeur pour apprendre ensemble. .

Cet article vous présente principalement quelques précautions concernant la sérialisation des formulaires jquery. Il est partagé pour votre référence et votre apprentissage. Je ne dirai pas grand-chose ci-dessous, jetons un œil à l'introduction détaillée :

Parlons d'abord de la différence entre lecture seule et désactivé dans les formulaires :

lecture seule n'est valable que pour la saisie et la zone de texte, mais désactivé est valable pour tous les éléments du formulaire, y compris la radio, la case à cocher, etc.

If If désactivé est utilisé dans le formulaire, l'utilisateur ne peut pas le sélectionner, ce qui signifie que la zone de texte ne peut pas obtenir le focus, tandis que la lecture seule peut obtenir le focus, mais ne peut pas être modifiée.

Le point le plus important, lors de l'envoi du formulaire, si l'attribut de contrôle du formulaire n'a pas d'attribut de nom, le champ ne sera pas envoyé et une paire clé-valeur ne sera pas formée si l'attribut de contrôle du formulaire est désactivé, le champ ne sera pas envoyé ; et une paire clé-valeur ne sera pas formée

Test 1, l'attribut name n'est pas défini : 

<body>
 <form id="form1">
   <select>
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>
Les résultats de sortie sont les suivants : 

serialize:

 serializeArray:
[]length: 
__proto__: Array(0)

Test 2, l'attribut name est défini : 

<body>
 <form id="form1">
   <select name="selectHuLuWa">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>
Les résultats de sortie sont les suivants :

serialize:
 selectHuLuWa=0
 serializeArray:
 [{…}]
{name: "selectHuLuWa", value: "0"}
length:1
__proto__:Array(0)

Test 3, définissez l'attribut readoly : 

<body>
 <form id="form1">
   <select name="selectHuLuWa" readonly="readonly">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>
Les résultats du test sont les suivants :


Test 4, définissez le attribut désactivé 

<body>
 <form id="form1">
   <select name="selectHuLuWa" disabled="disabled">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>
Les résultats du test sont les suivants :


Cela prouve que le contrôle de formulaire n'a pas d'attribut de nom, et la définition de l'attribut désactivé ne peut pas être sérialisée.


** Si vous devez sérialiser désactivé, la méthode est la suivante :


Supprimez l'attribut désactivé avant la sérialisation et ajoutez-le une fois la sérialisation terminée. **

Recommandations associées :


exemple de code de sérialisation de formulaire jQuery

jQuery sérialise le formulaire en un exemple d'objet objet

Exemple de code pour la sérialisation du formulaire jquery en objets_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!

Déclaration：
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
Article précédent：Explication détaillée de l'utilisation du plug-in de téléchargement jQuery webuploadArticle suivant：Explication détaillée de l'utilisation du plug-in de téléchargement jQuery webupload

Articles Liés

Voir plus