表单格式化插件jquery.serializeJSON

标签：jquery

前端在处理含有大量数据提交的表单时，除了使用Form直接提交刷新页面之外，经常碰到的需求是收集表单信息成数据对象，Ajax提交。

而在处理复杂的表单时，需要一个一个区手动判断处理字段值，显得非常麻烦。接下来介绍的插件将解决这个问题。

关于serializeJSON

使用jquery.serializeJSON，可以在基于jQuery或者Zepto的页面中，调用 .serializeJSON() 方法来序列化form表单的数据成JS对象。

使用

只需要在jQuery或者Zepto时候引入即可

 

 

示例

 

HTML form（支持input、textarea、select等标签）

 

                                                            serializeJSON     javascript                 tinytest.js     javascript                               Paper         Rock         Scissors                          Red         Blue         Yellow     

 

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

 

serializeJSON方法返回一个JS对象，并非JSON字符串。可以使用 JSON.stringify 转换成字符串（注意IE8兼容性）。

JavaScript权威指南(第6版)(中文版) http://www.gooln.com/document/452.html

 

var jsonString = JSON.stringify(obj);

 

指定数据类型

获取到的属性值一般是字符串，可以通过HTML指定类型 : type 进行强制转换。

 

                                                                                                                         

$(‘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, // 
 
数据类型也可以指定在 data-value-type 属性中，代替 :type 标记。
 

              

 

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‘).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#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, // 
 
自定义类型
可以使用 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();
使用整数keys作为数组的顺序
使用useIntKeyAsArrayIndex配置
 

        

 

按照默认的方法，结果为：

 

$(‘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

标签：jquery

原文地址：http://12953214.blog.51cto.com/12943214/1941229