Explication détaillée du plug-in de formatage de formulaire jquery.serializeJSON

Cet article vous apporte principalement une discussion détaillée du plug-in de formatage de formulaire jquery.serializeJSON. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Avant-propos

Lorsque le front-end traite des formulaires contenant une grande quantité de données soumises, en plus d'utiliser Form pour soumettre et actualiser directement la page, une exigence courante consiste à collecter des informations sur le formulaire. dans des objets de données et soumettez-les via Ajax.

Lorsque vous traitez des formulaires complexes, vous devez juger et traiter manuellement les valeurs des champs une par une, ce qui est très gênant. Le plugin introduit ensuite résoudra ce problème.

À propos de serializeJSON

En utilisant jquery.serializeJSON, vous pouvez appeler la méthode .serializeJSON() pour sérialiser les données de formulaire en objets JS dans une page basée sur jQuery ou Zepto.

Pour utiliser

il vous suffit de l'introduire dans jQuery ou Zepto

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

Exemple

Formulaire HTML (prend en charge la saisie, la zone de texte, la sélection et autres balises )

<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"]
}

La méthode serializeJSON renvoie un objet JS, pas une chaîne JSON. Vous pouvez utiliser JSON.stringify pour convertir en chaîne (notez la compatibilité IE8).

Le guide définitif de JavaScript (6e édition) (version chinoise) http://www.gooln.com/document/452.html

 var jsonString = JSON.stringify(obj);

Spécifier les types de données

La valeur d'attribut obtenue est généralement une chaîne, et peut être forcée à se convertir en spécifiant le type en HTML : type.

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

Le type de données peut également être spécifié dans l'attribut data-value-type, au lieu de la balise :type.

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

Configuration des options

Configuration par défaut

Les valeurs sont toujours des chaînes (sauf si les :types sont utilisés dans les noms d'entrée)

Les clés sont toujours chaînes (Par défaut, il ne détecte pas automatiquement s'il doit être converti en tableau)

Les cases à cocher non sélectionnées seront ignorées

Les éléments désactivés seront ignorés

Configuration personnalisée

Contient des cases à cocher non cochées

serializeJSON prend en charge la configuration checkboxUncheckedValue, ou vous pouvez ajouter l'attribut data-unchecked-value aux cases à cocher.

Méthode par défaut :

<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

La méthode ci-dessus ignorera les cases non cochées. Si vous devez l'inclure, vous pouvez utiliser la méthode suivante :

1. Configurez la case à cocherUncheckedValue

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

2 Ajoutez l'attribut data-unchecked-value

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

Détecter automatiquement le type de conversion

Le type par défaut est string : string, qui peut être converti en d'autres types via la configuration

$('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": ""
}

Dans de rares cas, une fonction de conversion personnalisée peut être utilisé

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
}

Types personnalisés

Vous pouvez utiliser customTypes pour configurer des types personnalisés ou remplacer les types par défaut ($.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
}

Ignorer les champs des formulaires vides

// 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();

Utiliser des clés entières comme ordre du tableau

Utiliser la configuration useIntKeyAsArrayIndex

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

Selon la méthode par défaut, le résultat est :

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

Utilisez useIntKeyAsArrayIndex pour convertir les démérites en tableau et définir l'ordre

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

Configuration par défaut par défaut

Toutes les configurations par défaut sont définies dans $.serializeJSON .defaultOptions et peut être modifié.

$.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": ""
}

Résumé

Ce plug-in prend en charge un ensemble très riche de configurations et un haut degré de personnalisation, apportant une grande commodité.

Recommandations associées :

Installez le plug-in de formatage de code CodeFormatter sur Sublime Text 3

Plug de formatage de date de page Web basé sur jquery -in _jquery

Installer le plug-in de formatage de code CodeFormatter sur Sublime Text 3

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!