Notes sur la sérialisation des formulaires jquery-js tutoriel-php.cn

Notes sur la sérialisation des formulaires jquery

小云云

Libérer： 2017-12-31 09:39:49

original

1745 Les gens l'ont consulté

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>

Copier après la connexion

Les résultats de sortie sont les suivants :

serialize:

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

Copier après la connexion

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>

Copier après la connexion

Les résultats de sortie sont les suivants :

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Les résultats du test sont les suivants :