Maison > Article > interface Web > Quelques conseils sur la sérialisation de formulaires dans jquery

Quelques conseils sur la sérialisation de formulaires dans jquery

巴扎黑original: 2017-08-07 16:36:281206parcourir

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. .Étudiez-le.

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 :

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

Si 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 en lecture seule.

Le point le plus important est que lors de l'envoi d'un 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 le formulaire ; l'attribut de contrôle est désactivé, le champ ne sera pas envoyé et ne formera pas de paires clé-valeur

Test 1, aucun attribut de nom n'est 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, définissez l'attribut name :

<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 l'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>

Résultat du test Comme suit :

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. **

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：Tutoriel sur la façon d'implémenter les fonctions JavaScript de glissement de la souris et de sélection multipleArticle suivant：Tutoriel sur la façon d'implémenter les fonctions JavaScript de glissement de la souris et de sélection multiple

Articles Liés

Voir plus