表單格式化外掛程式jquery.serializeJSON
- 巴扎黑原創
- 2017-06-23 10:59:581271瀏覽
前言
前端在處理含有大量資料提交的表單時，除了使用Form直接提交刷新頁面之外，經常碰到的需求是收集表單資訊成資料對象，Ajax提交。
而在處理複雜的表單時，需要一個區手動判斷處理欄位值，顯得非常麻煩。接下來介紹的插件將解決這個問題。
關於serializeJSON
使用jquery.serializeJSON，可以在基於jQuery或Zepto的頁面中，呼叫 .serializeJSON() 方法來序列化form表單的資料成JS物件。
使用
只需要在jQuery或Zepto時候引入即可
#
<script type="text/javascript" src="jquery.js?1.1.10"></script> <script type="text/javascript" src="jquery.serializejson.js?1.1.10"></script>
HTML form（支援input、textarea
select
- 等標籤）
-
<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?1.1.10", language: "javascript", popular: "0" }
},
selectOne: "rock",
selectMultiple: ["red", "blue"]
}
轉換成字串（注意IE8相容性）。
JavaScript權威指南(第6版)(中文版)
var jsonString = JSON.stringify(obj);
#指定資料型別取得到的屬性值一般是字串，可以透過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='{"my": "stuff"}'/>
</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"}
}
}
資料類型也可以指定在
data-value-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設定
預設設定
input names
總是為字串（預設不自動偵測是否需要轉換為陣列）
使用
Keys:types
）
未選取的checkboxes
disabled
的写法 释义
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为整数时，将序列化为数组###### # ######## 包含未勾選的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"});
// returns =>{'check1': 'true', check2: 'false', check3: 'false'}##### # ############2. 新增###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 }
}## #### ############自動偵測轉換類型######預設的型別為字串 ###:string### ，可以透過設定轉換為其它型別## ####### ###$('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": ""}###### ##########在极少数情况下，可以使用自定义转换函数
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}
自定义类型
可以使用 customTypes 配置自定义类型或者覆盖默认类型（$.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}
忽略空表单字段
// 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();使用整数keys作为数组的顺序
使用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>
按照默认的方法，结果为：
$('form').serializeJSON();
// returns =>{'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}
使用useIntKeyAsArrayIndex可以将记过转换为数组并制定顺序
$('form').serializeJSON({useIntKeysAsArrayIndex: true});
// returns =>{'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}
默认配置Defaults
所有的默认配置均定义在 $.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": ""}
总结
这个插件支持的配置非常丰富，自定义程度很高，带来很大的便捷性。
以上是表單格式化外掛程式jquery.serializeJSON的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn