Maison >interface Web >js tutoriel >Plug-in de formatage de formulaire jquery.serializeJSON
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 les informations du 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.
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.
il vous suffit de l'introduire dans jQuery ou Zepto
<script></script> <script></script>
HTML form
(prend en charge input
, textarea
, select
et autres balises)
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?1.1.10", language: "javascript", popular: "0" } }, selectOne: "rock", selectMultiple: ["red", "blue"] }
renvoie un objet JS, pas une chaîne JSON. Vous pouvez utiliser serializeJSON
pour convertir en chaîne (notez la compatibilité IE8). JSON.stringify
var jsonString = JSON.stringify(obj);
au lieu de la balise
.$('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, //
configuration des options
data-value-type
:type
Les valeurs sont toujours des chaînes (sauf si
sont toujours des chaînes (la valeur par défaut ne détecte pas automatiquement si la conversion à un tableau est requis)
Le input names
sera ignoré:types
Keys
checkboxes
prise en charge de SerializeJSON disabled
configuration, ou vous pouvez ajouter des attributs elements
dans
写法 释义 checkboxUncheckedValue: string 针对未勾选的checkboxes,设定值 parseBooleans: true 自动检测转换”true”、”false”为布尔值true、false parseNumbers: true 自动检测转换”1″、”33.33″、”-44″为数字1、33.33、-44 parseNulls: true 自动检测字符串”null”为null parseAll: true 自动检测转换以上类型的字符串 parseWithFunction: function 自定义转换函数 function(value, name){return parsedValue}customTypes: {} 自定义:types覆盖默认types,如{type: function(value){…}} defaultTypes: {defaultTypes} 重新定义所有的:types,如{type: function(value){…}} useIntKeysAsArrayIndex: true 当keys为整数时,将序列化为数组
checkboxUncheckedValue
checkboxes
data-unchecked-value
$('form').serializeJSON(); // returns =>{'check1': 'true'} // Note that check2 and check3 are not included because they are not checked
attribut
checkboxUncheckedValue
$('form').serializeJSON({checkboxUncheckedValue: "false"}); // returns =>{'check1': 'true', check2: 'false', check3: 'false'}
Le type par défaut est une chaîne data-unchecked-value
, qui peut être convertie en d'autres types via la configuration
$('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 } }
在极少数情况下,可以使用自定义转换函数
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, //
可以使用 customTypes
配置自定义类型或者覆盖默认类型($.serializeJSON.defaultOptions.defaultTypes
)
$('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", //
// Select only imputs that have a non-empty value$('form :input[value!=""]').serializeJSON(); // Or filter them from the formobj = $('form').find('input').not('[value=""]').serializeJSON(); // For more complicated filtering, you can use a functionobj = $form.find(':input').filter(function () { return $.trim(this.value).length > 0 }).serializeJSON();
使用useIntKeyAsArrayIndex
配置
按照默认的方法,结果为:
$('form').serializeJSON(); // returns =>{'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}
使用useIntKeyAsArrayIndex
可以将记过转换为数组并制定顺序
$('form').serializeJSON({useIntKeysAsArrayIndex: true}); // returns =>{'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}
所有的默认配置均定义在 $.serializeJSON.defaultOptions
,可以进行修改。
$.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": ""}
这个插件支持的配置非常丰富,自定义程度很高,带来很大的便捷性。
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!