表單格式化外掛程式jquery.serializeJSON-js教程-PHP中文網

前言

前端在處理含有大量資料提交的表單時，除了使用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"]
}

登入後複製

serializeJSON

方法傳回一個JS對象，並非JSON字串。可以使用 JSON.stringify

轉換成字串（注意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=&#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"}
    }
}

登入後複製

資料類型也可以指定在

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

會被忽略#############自訂設定#########

写法                                 释义
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$(&#39;form :input[value!=""]&#39;).serializeJSON(); 
// Or filter them from the formobj = $(&#39;form&#39;).find(&#39;input&#39;).not(&#39;[value=""]&#39;).serializeJSON(); 
// For more complicated filtering, you can use a functionobj = $form.find(&#39;:input&#39;).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": ""}

登入後複製

总结

这个插件支持的配置非常丰富，自定义程度很高，带来很大的便捷性。