Einige Anleitungen zur Formularserialisierung in JQuery-js-Tutorial-php.cn

Einige Anleitungen zur Formularserialisierung in JQuery

巴扎黑

Freigeben： 2017-08-07 16:36:28

Original

1250 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die Vorsichtsmaßnahmen für die Serialisierung von JQuery-Formularen vorgestellt. Der Artikel stellt sie anhand des Beispielcodes ausführlich vor, der für alle, die ihn benötigen, einen gewissen Referenz- und Lernwert hat und dem Editor folgen kann, um gemeinsam zu lernen . Studiere es.

In diesem Artikel werden hauptsächlich einige Vorsichtsmaßnahmen zur Serialisierung von JQuery-Formularen vorgestellt. Ich werde im Folgenden nicht viel sagen. Schauen wir uns die detaillierte Einführung an:

Lassen Sie uns zunächst über den Unterschied zwischen schreibgeschützt und deaktiviert in Formularen sprechen:

readonly ist nur für Eingabe und Textbereich gültig, deaktiviert ist jedoch für alle Formularelemente gültig . Gültig, einschließlich Radio, Kontrollkästchen usw.
Wenn im Formular „Disabled“ verwendet wird, kann der Benutzer es nicht auswählen, was bedeutet, dass das Textfeld keinen Fokus erhalten kann, während „readonly“ den Fokus erhalten kann, aber nicht geändert werden kann. nur

Der wichtigste Punkt ist, dass beim Senden eines Formulars das Feld nicht gesendet wird und kein Schlüssel-Wert-Paar gebildet wird, wenn das Formularsteuerattribut kein Namensattribut hat Formularkontrollattribut ist deaktiviert, das Feld wird nicht gesendet und bildet keine Schlüssel-Wert-Paare

Test 1, kein Namensattribut ist festgelegt:

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

Nach dem Login kopieren

Die Ausgabeergebnisse lauten wie folgt:

serialize:

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

Nach dem Login kopieren

Test 2, legen Sie das Namensattribut fest:

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

Nach dem Login kopieren

Die Ausgabeergebnisse lauten wie folgt:

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

Nach dem Login kopieren

Test 3, setzen Sie das readoly-Attribut:

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

Nach dem Login kopieren

Die Testergebnisse sind wie folgt:

Test 4, Deaktiviert einstellen Attribut

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

Nach dem Login kopieren

Testergebnis Wie folgt:

Dies beweist dass das Formularsteuerelement kein Namensattribut hat und das Festlegen des deaktivierten Attributs nicht serialisiert werden kann.

** Wenn Sie die Serialisierung deaktivieren müssen, lautet die Methode:

Entfernen Sie das deaktivierte Attribut vor der Serialisierung und fügen Sie es nach Abschluss der Serialisierung hinzu. **

Das obige ist der detaillierte Inhalt vonEinige Anleitungen zur Formularserialisierung in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!