详谈表单格式化插件jquery.serializeJSON

2020-05-22 16:04:11易采站长站整理

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

数据类型也可以指定在 data-value-type 属性中,代替 :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>

options配置

默认配置

Values始终为字符串(除非在input names使用:types )

Keys始终为字符串(默认不自动检测是否需要转换为数组)

未选择的checkboxes会被忽略

disabled的elements会被忽略

自定义配置

包含未勾选的checkboxes

serializeJSON 支持 checkboxUncheckedValue 配置,或者可以在checkboxes添加 data-unchecked-value 属性。

默认方法:


<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

上面的写法会忽略未勾选的复选框。如果需要包含,则可以使用以下方法:

1. 配置checkboxUncheckedValue


$('form').serializeJSON({checkboxUncheckedValue: "false"});