Implementierungsmethode für die Serialisierung von Formulardaten in JSON-Objekte durch jQuery

Dieser Artikel stellt hauptsächlich die Implementierungsmethode der jQuery-Serialisierung von Formulardaten in JSON-Objekte vor. Dieser Artikel stellt es Ihnen ausführlich anhand von Beispielcode vor und bietet einen gewissen Referenzwert.

Die von jquery bereitgestellte Serialisierungsmethode kann implementiert werden.

$("#searchForm").serialize();

Bei der Beobachtung der Ausgabeinformationen haben wir jedoch festgestellt, dass die Methode serialize() dazu dient, die Daten im Formular in eine Zeichenfolge im HTTP-Anforderungsformat zusammenzufügen.

Serialize kann tatsächlich allgemeine Übermittlungsdaten lösen. Manchmal benötigen wir jedoch ein Objektobjekt anstelle einer Zeichenfolge (zum Beispiel wird beim Festlegen von Abfragebedingungsparametern in jqgrid reload ein Objektobjekt benötigt).

Die Methode lautet wie folgt:

(function(window, $) {
  $.fn.serializeJson = function() {
    var serializeObj = {};
    var array = this.serializeArray();
    var str = this.serialize();
    $(array).each(
        function() {
          if (serializeObj[this.name]) {
            if ($.isArray(serializeObj[this.name])) {
              serializeObj[this.name].push(this.value);
            } else {
              serializeObj[this.name] = [
                  serializeObj[this.name], this.value ];
            }
          } else {
            serializeObj[this.name] = this.value;
          }
        });
    return serializeObj;
  };
})(window, jQuery);

Aufruf:

console.info($("#searchForm").serializeJson());

Das Folgende ist ein Codeteil, um zu sehen, wie jQuery das Formular in a serialisiert JSON-Objekt

<form id="myform"> 
  <table> 
    <tr> 
      <td>姓名:</td> 
      <td> <input type="text" name="name" /> </td> 
    </tr> 
    <tr> 
      <td>性别:</td> 
      <td> 
        <input type="radio" name="sex" value="1"> 男 
        <input type="radio" name="sex" value="0"> 女 
      </td> 
    </tr> 
    <tr> 
      <td>年龄:</td> 
      <td> 
        <select name="age"> 
          <option value="20">20</option> 
          <option value="21">21</option> 
          <option value="22">22</option> 
        </select> 
      </td> 
    </tr> 
    <tr> 
      <td>爱好</td> 
      <td> 
        <input type="checkbox" value="basketball" name="hobby">篮球 
        <input type="checkbox" value="volleyball" name="hobby">排球 
        <input type="checkbox" value="football" name="hobby">足球 
        <input type="checkbox" value="earth" name="hobby">地球 
      </td> 
    </tr> 
    <tr> 
      <td colspan="2"> 
        <input type="button" id="ajaxBtn" value="提交" /> 
      </td> 
    </tr> 
  </table> 
</form> 
 
<script type="text/javascript"> 
  $(function() { 
    $("#ajaxBtn").click(function() { 
        var params = $("#myform").serializeObject(); //将表单序列化为JSON对象  
        console.info(params); 
      }) 
  }) 
  $.fn.serializeObject = function() { 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
      if (o[this.name]) { 
        if (!o[this.name].push) { 
          o[this.name] = [ o[this.name] ]; 
        } 
        o[this.name].push(this.value || &#39;&#39;); 
      } else { 
        o[this.name] = this.value || &#39;&#39;; 
      } 
    }); 
    return o; 
  } 
</script>

Die obige Methode serializeObject dient zum Serialisieren des Formulars in ein JSON-Objekt

Zusammenfassung

Das Obige wurde vom Herausgeber angegeben. Die von Ihnen eingeführte Implementierungsmethode für die Serialisierung von Formulardaten in JSON-Objekten durch jQuery. Ich hoffe, sie wird Ihnen hilfreich sein!

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für die Serialisierung von Formulardaten in JSON-Objekte durch jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!