AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

表单格式化插件jquery.serializeJSON

2017-11-16 1734
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

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

关于serializeJSON

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

使用

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

 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></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",   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>
    <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 属性中，代替 :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$('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，可以进行修改。

 

 

  }  "null": null,  "string": "text is always string",  "empty": ""}
 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 

本文转自xmgdc51CTO博客，原文链接：http://blog.51cto.com/12953214/1941229 ，如需转载请自行联系原作者
 


 


 


 


 


 


 



                        
                    

                    
                        

                            

    
文章标签：

    

        

            JavaScript
        

        

            前端开发
        

        

            C#
        

        

            数据格式
        

        

            JSON
        

    



                            

    
关键词：

    

        

            jQuery表单
        

        

            表单jQuery
        

        

            插件jQuery
        

    



                            
                        

                        
                        
                    
                

                


                

                    

                        

                            
                                
                            
                            

                        

                        技术小甜
                        

                        

                    

                    

                        

                            

                            
目录

                        

                        

                    

                

                

                    

                


                

    
相关文章

    

        

            

                

                    哈你真皮
                    
                

                |
                
10天前

                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        jQuery和CSS3滑动展开菜单按钮插件
                    
                    
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开

                    

                        

                            

                                哈你真皮
                                
                            

                            48
                            21
                            
                        

                    

                

                
            

        

        

            

                

                    哈你真皮
                    
                

                |
                
11天前

                |
                

                    JavaScript
                

            

            

                

                    
                        jquery图片和pdf文件预览插件
                    
                    
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。

                    

                        

                            

                                哈你真皮
                                
                            

                            41
                            16
                            
                        

                    

                

                
            

        

        

            

                

                    哈你真皮
                    
                

                |
                
6天前

                |
                

                    JavaScript
                

            

            

                

                    
                        jquery文字动画特效插件animatext
                    
                    
jquery文字动画特效插件animatext

                    

                        

                            

                                哈你真皮
                                
                            

                            26
                            9
                            
                        

                    

                

                
            

        

        

            

                

                    游客dng4gjyb342he
                    
                

                |
                
9天前

                |
                

                    移动开发
                    JavaScript
                    前端开发
                

            

            

                

                    
                        简单易用的jquery响应式轮播图插件ma5slider
                    
                    
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽，可以通过CSS定制外观，支持无限循环模式，内置水平，垂直和淡入淡出三种轮播图过渡动画效果。

                    

                        

                            

                                游客dng4gjyb342he
                                
                            

                            39
                            11
                            
                        

                    

                

                
            

        

        

            

                

                    游客dng4gjyb342he
                    
                

                |
                
11天前

                |
                

                    JavaScript
                

            

            

                

                    
                        简洁实用的jQuery进度条插件
                    
                    
这是一款简洁实用的jQuery进度条插件。该插件使用简单，通过在页面中放置指定的HTML代码，即可生成带动画效果的进度条。

                    

                        

                            

                                游客dng4gjyb342he
                                
                            

                            36
                            12
                            
                        

                    

                

                
            

        

        

            

                

                    游客dng4gjyb342he
                    
                

                |
                
10天前

                |
                

                    JavaScript
                    容器
                

            

            

                

                    
                        jQuery文字跑马灯插件Marquee
                    
                    
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画，制作文字的上下左右移动效果。

                    

                        

                            

                                游客dng4gjyb342he
                                
                            

                            28
                            7
                            
                        

                    

                

                
            

        

        

            

                

                    哈你真皮
                    
                

                |
                
7天前

                |
                

                    JavaScript
                    容器
                

            

            

                

                    
                        jquery和CSS3图片排序过滤搜索插件
                    
                    
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序，按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。

                    

                        

                            

                                哈你真皮
                                
                            

                            19
                            2
                            
                        

                    

                

                
            

        

        

            

                

                    游客dng4gjyb342he
                    
                

                |
                
7天前

                |
                

                    JavaScript
                

            

            

                

                    
                        jquery和CSS3响应式轮播图插件jcSlider
                    
                    
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画，它可以和animate.css完美结合，生成60多种轮播图过渡动画效果。

                    

                        

                            

                                游客dng4gjyb342he
                                
                            

                            25
                            2
                            
                        

                    

                

                
            

        

        

            

                

                    游客dng4gjyb342he
                    
                

                |
                
11天前

                |
                

                    JavaScript
                

            

            

                

                    
                        jQuery Lightbox和弹出层插件flashy
                    
                    
Flashy.js是一款响应式jQuery Lightbox和弹出层插件

                    

                        

                            

                                游客dng4gjyb342he
                                
                            

                            34
                            6
                            
                        

                    

                

                
            

        

        

            

                

                    哈你真皮
                    
                

                |
                
9天前

                |
                

                    JavaScript
                    容器
                

            

            

                

                    
                        jQuery消息通知显示插件
                    
                    
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等

                    

                        

                            

                                哈你真皮
                                
                            

                            12
                            2