머리말
프런트 엔드에서 대량의 데이터 제출이 포함된 양식을 처리할 때 양식을 사용하여 페이지를 직접 제출하고 새로 고치는 것 외에도 자주 발생하는 요구 사항은 양식 정보를 데이터 객체로 수집하고 Ajax를 통해 제출하세요.
복잡한 양식을 다룰 때에는 필드 값을 일일이 수동으로 판단하고 처리해야 하는데, 이는 매우 번거로운 작업입니다. 다음에 소개되는 플러그인은 이 문제를 해결할 것입니다.
serializeJSON 정보
jquery.serializeJSON을 사용하면 .serializeJSON() 메서드를 호출하여 jQuery 또는 Zepto 개체 기반 페이지에서 양식 데이터를 JS로 직렬화할 수 있습니다. . 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='{"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配置
默认配置
自定义配置
写法 释义
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
을 사용하려면 jQuery 또는 Zepto에 도입하면 됩니다.
$('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": ""}로그인 후 복사
🎜🎜🎜🎜 예 🎜🎜 🎜🎜
HTML 형식(
입력 지원) ,
textarea,
select 및 기타 태그) 🎜🎜🎜 🎜
🎜
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}로그인 후 복사
로그인 후 복사
🎜🎜 🎜🎜🎜🎜
javascript code >：🎜🎜🎜🎜<div class="crayon-main">🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜🎜🎜🎜🎜🎜<code>serializeJSON 메서드는 JSON 문자열이 아닌 JS 객체를 반환합니다.
JSON.stringify를 사용하여 문자열로 변환할 수 있습니다(IE8 호환성 참고). 🎜🎜JavaScript 최종 가이드(6판)(중국어 버전) 🎜🎜🎜 🎜
$('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}로그인 후 복사
로그인 후 복사
🎜🎜 🎜🎜🎜🎜데이터 유형 지정🎜🎜얻은 속성 값은 일반적으로 문자열이며 HTML을 통해 유형을 지정할 수 있습니다. 강제 변환을 위한 유형입니다. 🎜🎜🎜 🎜
🎜
// 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();로그인 후 복사
로그인 후 복사
🎜🎜
<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>
로그인 후 복사
로그인 후 복사
🎜🎜 🎜🎜🎜🎜 데이터 유형은
data-value-type 속성에서 :type 태그입니다. 🎜🎜🎜 🎜
$('form').serializeJSON();
// returns =>{'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}로그인 후 복사
로그인 후 복사
🎜🎜 🎜🎜🎜🎜options 구성🎜
기본 구성
- 🎜값은 항상 문자열입니다(
입력 이름 :types 사용)🎜
- 🎜
키는 항상 문자열입니다(기본값은 문자열이 필요한지 여부를 자동으로 감지하지 않습니다). 배열로 변환됨)🎜
- 🎜선택하지 않은
체크박스는 무시됩니다🎜
- 🎜
비활성화의 요소 는 무시됩니다. 무시 🎜
사용자 정의 구성
🎜
$('form').serializeJSON({useIntKeysAsArrayIndex: true});
// returns =>{'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}로그인 후 복사
로그인 후 복사
🎜🎜 🎜🎜🎜 선택되지 않은 확인란이 포함되어 있습니다.🎜🎜serializeJSON은
checkboxUncheckedValue 구성을 선택하거나
checkboxes에
data-unchecked-value 속성을 추가할 수 있습니다. 🎜🎜기본 방식: 🎜🎜🎜 🎜
🎜
$.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": ""}로그인 후 복사
로그인 후 복사
🎜🎜rrreee🎜🎜 🎜🎜🎜🎜위 작성 방식은 체크되지 않은 체크박스를 무시합니다. 이를 포함해야 하는 경우 다음 방법을 사용할 수 있습니다. 🎜🎜1.
checkboxUncheckedValue 구성🎜🎜🎜 🎜
🎜rrreee🎜🎜 🎜🎜🎜🎜2 .
data-unchecked-value속성 추가🎜🎜🎜🎜rrreee🎜🎜rrreee🎜🎜🎜🎜🎜🎜자동으로 변환 유형 감지🎜🎜기본 유형은 문자열
:string , 구성 가능 다른 유형으로 변환🎜🎜🎜🎜rrreee🎜🎜🎜🎜🎜
在极少数情况下，可以使用自定义转换函数
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": ""}로그인 후 복사
로그인 후 복사
总结
这个插件支持的配置非常丰富，自定义程度很高，带来很大的便捷性。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
