Ausführliche Erläuterung des Formularformatierungs-Plug-Ins jquery.serializeJSON

Dieser Artikel enthält hauptsächlich eine detaillierte Diskussion des Formularformatierungs-Plug-Ins jquery.serializeJSON. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorwort

Wenn das Front-End Formulare verarbeitet, die eine große Menge an übermittelten Daten enthalten, besteht neben der Verwendung von Formular zum direkten Senden und Aktualisieren der Seite eine häufige Anforderung darin, Formularinformationen zu sammeln in Datenobjekte umwandeln und über Ajax übermitteln.

Beim Umgang mit komplexen Formularen müssen Sie die Feldwerte einzeln manuell beurteilen und verarbeiten, was sehr mühsam ist. Das als nächstes vorgestellte Plugin wird dieses Problem lösen.

Über serializeJSON

Mit jquery.serializeJSON können Sie die Methode .serializeJSON() aufrufen, um Formulardaten in JS-Objekte auf einer Seite basierend auf jQuery oder Zepto zu serialisieren.

Um

zu verwenden, müssen Sie es nur in jQuery oder Zepto einführen

 <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></script>

Beispiel

HTML-Form (unterstützt Eingabe, Textbereich, Auswahl und andere Tags )

<form id="my-profile">
  <!-- simple attribute -->
  <input type="text" name="fullName"       value="Mario Izquierdo" />
 
  <!-- nested attributes -->
  <input type="text" name="address[city]"     value="San Francisco" />
  <input type="text" name="address[state][name]" value="California" />
  <input type="text" name="address[state][abbr]" value="CA" />
 
  <!-- array -->
  <input type="text" name="jobbies[]"       value="code" />
  <input type="text" name="jobbies[]"       value="climbing" />
 
  <!-- textareas, checkboxes ... -->
  <textarea       name="projects[0][name]">serializeJSON</textarea>
  <textarea       name="projects[0][language]">javascript</textarea>
  <input type="hidden"  name="projects[0][popular]" value="0" />
  <input type="checkbox" name="projects[0][popular]" value="1" checked />
 
  <textarea       name="projects[1][name]">tinytest.js</textarea>
  <textarea       name="projects[1][language]">javascript</textarea>
  <input type="hidden"  name="projects[1][popular]" value="0" />
  <input type="checkbox" name="projects[1][popular]" value="1"/>
 
  <!-- select -->
  <select name="selectOne">
    <option value="paper">Paper</option>
    <option value="rock" selected>Rock</option>
    <option value="scissors">Scissors</option>
  </select>
 
  <!-- select multiple options, just name it as an array[] -->
  <select multiple name="selectMultiple[]">
    <option value="red" selected>Red</option>
    <option value="blue" selected>Blue</option>
    <option value="yellow">Yellow</option>
  </select>
</form>

javascript:

$('#my-profile').serializeJSON();
 
// returns =>
{
  fullName: "Mario Izquierdo",
 
  address: {
  city: "San Francisco",
  state: {
    name: "California",
    abbr: "CA"
    }
  },
 
  jobbies: ["code", "climbing"],
 
  projects: {
    '0': { name: "serializeJSON", language: "javascript", popular: "1" },
    '1': { name: "tinytest.js",  language: "javascript", popular: "0" }
  },
 
  selectOne: "rock",
  selectMultiple: ["red", "blue"]
}

Die Methode serializeJSON gibt ein JS-Objekt zurück, keine JSON-Zeichenfolge. Sie können JSON.stringify zum Konvertieren in einen String verwenden (IE8-Kompatibilität beachten).

The Definitive Guide to JavaScript (6. Auflage) (chinesische Version) http://www.gooln.com/document/452.html

 var jsonString = JSON.stringify(obj);

Datentypen angeben

Der erhaltene Attributwert ist im Allgemeinen eine Zeichenfolge und kann durch Angabe des Typs in HTML zur Konvertierung gezwungen werden: Typ.

<form>
  <input type="text" name="notype"      value="default type is :string"/>
  <input type="text" name="string:string"  value=":string type overrides parsing options"/>
  <input type="text" name="excluded:skip"  value="Use :skip to not include this field in the result"/>
 
  <input type="text" name="number[1]:number"      value="1"/>
  <input type="text" name="number[1.1]:number"     value="1.1"/>
  <input type="text" name="number[other stuff]:number" value="other stuff"/>
 
  <input type="text" name="boolean[true]:boolean"   value="true"/>
  <input type="text" name="boolean[false]:boolean"   value="false"/>
  <input type="text" name="boolean[0]:boolean"     value="0"/>
 
  <input type="text" name="null[null]:null"      value="null"/>
  <input type="text" name="null[other stuff]:null"   value="other stuff"/>
 
  <input type="text" name="auto[string]:auto"     value="text with stuff"/>
  <input type="text" name="auto[0]:auto"        value="0"/>
  <input type="text" name="auto[1]:auto"        value="1"/>
  <input type="text" name="auto[true]:auto"      value="true"/>
  <input type="text" name="auto[false]:auto"      value="false"/>
  <input type="text" name="auto[null]:auto"      value="null"/>
  <input type="text" name="auto[list]:auto"      value="[1, 2, 3]"/>
 
  <input type="text" name="array[empty]:array"     value="[]"/>
  <input type="text" name="array[list]:array"     value="[1, 2, 3]"/>
 
  <input type="text" name="object[empty]:object"    value="{}"/>
  <input type="text" name="object[dict]:object"    value=&#39;{"my": "stuff"}&#39;/>
</form>

$('form').serializeJSON();
 
// returns =>
{
  "notype": "default type is :string",
  "string": ":string type overrides parsing options",
  // :skip type removes the field from the output
  "number": {
    "1": 1,
    "1.1": 1.1,
    "other stuff": NaN, // <-- Other stuff parses as NaN (Not a Number)
  },
  "boolean": {
    "true": true,
    "false": false,
    "0": false, // <-- "false", "null", "undefined", "", "0" parse as false
  },
  "null": {
    "null": null, // <-- "false", "null", "undefined", "", "0" parse as null
    "other stuff": "other stuff"
  },
  "auto": { // works as the parseAll option
    "string": "text with stuff",
    "0": 0,     // <-- parsed as number
    "1": 1,     // <-- parsed as number
    "true": true,  // <-- parsed as boolean
    "false": false, // <-- parsed as boolean
    "null": null,  // <-- parsed as null
    "list": "[1, 2, 3]" // <-- array and object types are not auto-parsed
  },
  "array": { // <-- works using JSON.parse
    "empty": [],
    "not empty": [1,2,3]
  },
  "object": { // <-- works using JSON.parse
    "empty": {},
    "not empty": {"my": "stuff"}
  }
}

Der Datentyp kann anstelle des :type-Tags auch im Attribut data-value-type angegeben werden.

<form>
 <input type="text" name="number[1]"   data-value-type="number" value="1"/>
 <input type="text" name="number[1.1]"  data-value-type="number" value="1.1"/>
 <input type="text" name="boolean[true]" data-value-type="boolean" value="true"/>
 <input type="text" name="null[null]"  data-value-type="null"  value="null"/>
 <input type="text" name="auto[string]" data-value-type="auto"  value="0"/>
</form>

Optionskonfiguration

Standardkonfiguration

Werte sind immer Zeichenfolgen (es sei denn, :types werden in Eingabenamen verwendet)

Schlüssel sind immer Zeichenfolgen (Standardmäßig wird nicht automatisch erkannt, ob eine Konvertierung in ein Array erforderlich ist)

Nicht ausgewählte Kontrollkästchen werden ignoriert

Deaktivierte Elemente werden ignoriert

Benutzerdefinierte Konfiguration

Enthält nicht aktivierte Kontrollkästchen

serializeJSON unterstützt die Konfiguration „checkboxUncheckedValue“, oder Sie können den Kontrollkästchen das Attribut „data-unchecked-value“ hinzufügen.

Standardmethode:

<form>
 <input type="checkbox" name="check1" value="true" checked/>
 <input type="checkbox" name="check2" value="true"/>
 <input type="checkbox" name="check3" value="true"/>
</form>

$('form').serializeJSON();
 
// returns =>
{'check1': 'true'} // Note that check2 and check3 are not included because they are not checked

Die obige Methode ignoriert nicht aktivierte Kontrollkästchen. Wenn Sie es einschließen müssen, können Sie die folgende Methode verwenden:

1. Konfigurieren Sie checkboxUncheckedValue

$('form').serializeJSON({checkboxUncheckedValue: "false"});
 
// returns =>
{'check1': 'true', check2: 'false', check3: 'false'}

2. Fügen Sie das data-unchecked-value-Attribut

<form id="checkboxes">
 <input type="checkbox" name="checked[bool]" value="true" data-unchecked-value="false" checked/>
 <input type="checkbox" name="checked[bin]"  value="1"  data-unchecked-value="0"   checked/>
 <input type="checkbox" name="checked[cool]" value="YUP"                checked/>
 
 <input type="checkbox" name="unchecked[bool]" value="true" data-unchecked-value="false" />
 <input type="checkbox" name="unchecked[bin]"  value="1"  data-unchecked-value="0" />
 <input type="checkbox" name="unchecked[cool]" value="YUP" /> <!-- No unchecked value specified -->
</form>

$('form#checkboxes').serializeJSON(); // Note no option is used
 
// returns =>
{
 'checked': {
  'bool': 'true',
  'bin':  '1',
  'cool': 'YUP'
 },
 'unchecked': {
  'bool': 'false',
  'bin': '0'
  // Note that unchecked cool does not appear, because it doesn't use data-unchecked-value
 }
}

Konvertierungstyp automatisch erkennen

Der Standardtyp ist string: string, der durch Konfiguration in andere Typen konvertiert werden kann

$('form').serializeJSON({parseNulls: true, parseNumbers: true});
 
// returns =>
{
 "bool": {
  "true": "true", // booleans are still strings, because parseBooleans was not set
  "false": "false",
 }
 "number": {
  "0": 0, // numbers are parsed because parseNumbers: true
  "1": 1,
  "2.2": 2.2,
  "-2.25": -2.25,
 }
 "null": null, // "null" strings are converted to null becase parseNulls: true
 "string": "text is always string",
 "empty": ""
}

In seltenen Fällen ist dies mit einer benutzerdefinierten Konvertierungsfunktion möglich verwendet werden

var emptyStringsAndZerosToNulls = function(val, inputName) {
 if (val === "") return null; // parse empty strings as nulls
 if (val === 0) return null; // parse 0 as null
 return val;
}
 
$('form').serializeJSON({parseWithFunction: emptyStringsAndZerosToNulls, parseNumbers: true});
 
// returns =>
{
 "bool": {
  "true": "true",
  "false": "false",
 }
 "number": {
  "0": null, // <-- parsed with custom function
  "1": 1,
  "2.2": 2.2,
  "-2.25": -2.25,
 }
 "null": "null",
 "string": "text is always string",
 "empty": null // <-- parsed with custom function
}

Benutzerdefinierte Typen

Sie können customTypes verwenden, um benutzerdefinierte Typen zu konfigurieren oder Standardtypen zu überschreiben ($.serializeJSON.defaultOptions.defaultTypes)

<form>
 <input type="text" name="scary:alwaysBoo" value="not boo"/>
 <input type="text" name="str:string"   value="str"/>
 <input type="text" name="number:number"  value="5"/>
</form>

$('form').serializeJSON({
 customTypes: {
  alwaysBoo: function(str) { // value is always a string
   return "boo";
  },
  string: function(str) { // all strings will now end with " override"
   return str + " override";
  }
 }
});
 
// returns =>
{
 "scary": "boo",    // <-- parsed with type :alwaysBoo
 "str": "str override", // <-- parsed with new type :string (instead of the default)
 "number": 5,      // <-- the default :number still works
}

Leere Formularfelder ignorieren

// Select only imputs that have a non-empty value
$('form :input[value!=""]').serializeJSON();
 
// Or filter them from the form
obj = $('form').find('input').not('[value=""]').serializeJSON();
 
// For more complicated filtering, you can use a function
obj = $form.find(':input').filter(function () {
     return $.trim(this.value).length > 0
   }).serializeJSON();

Ganzzahlschlüssel als Reihenfolge des Arrays verwenden

useIntKeyAsArrayIndex-Konfiguration verwenden

<form>
 <input type="text" name="arr[0]" value="foo"/>
 <input type="text" name="arr[1]" value="var"/>
 <input type="text" name="arr[5]" value="inn"/>
</form>

Das Ergebnis entspricht der Standardmethode ist:

$('form').serializeJSON();
 
// returns =>
{'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}

Verwenden Sie useIntKeyAsArrayIndex, um Fehler in ein Array umzuwandeln und die Reihenfolge festzulegen

$('form').serializeJSON({useIntKeysAsArrayIndex: true});
 
// returns =>
{'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}

Standardkonfigurationsstandardwerte

Alle Standardkonfigurationen sind in $.serializeJSON definiert .defaultOptions und kann geändert werden.

$.serializeJSON.defaultOptions.parseAll = true; // parse booleans, numbers and nulls by default
 
$('form').serializeJSON(); // No options => then use $.serializeJSON.defaultOptions
 
// returns =>
{
 "bool": {
  "true": true,
  "false": false,
 }
 "number": {
  "0": 0,
  "1": 1,
  "2.2": 2.2,
  "-2.25": -2.25,
 }
 "null": null,
 "string": "text is always string",
 "empty": ""
}

Zusammenfassung

Dieses Plug-in unterstützt einen sehr umfangreichen Satz an Konfigurationen und ein hohes Maß an Anpassungsmöglichkeiten, was großen Komfort bietet.

Verwandte Empfehlungen:

Installieren Sie das Codeformatierungs-Plug-in CodeFormatter auf Sublime Text 3

JQuery-basiertes Webseiten-Datumsformatierungs-Plugin -in _jquery

Installieren Sie das Codeformatierungs-Plug-in CodeFormatter auf Sublime Text 3

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Formularformatierungs-Plug-Ins jquery.serializeJSON. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!