この記事では主にフォーム書式設定プラグイン jquery.serializeJSON について詳しく説明します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
前書き
フロントエンドが大量のデータ送信を含むフォームを処理する場合、Form を使用してページを直接送信および更新することに加えて、フォーム情報をデータ オブジェクトに収集し、それを送信するという要件がよく発生します。アヤックス。
複雑なフォームを扱う場合、フィールドの値を一つ一つ手動で判断して処理する必要があり、非常に面倒です。次に紹介するプラグインはこの問題を解決します。
serializeJSON について
jquery.serializeJSON を使用すると、.serializeJSON() メソッドを呼び出して、jQuery または Zepto に基づいたページ内の JS オブジェクトにフォーム データをシリアル化できます。
使用するには
それをjQueryまたはZeptoに導入するだけです
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.serializejson.js"></script>
例
HTMLフォーム(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 との互換性に注意してください)。
The Definitive Guide to JavaScript (第 6 版) (中国語版) http://www.gooln.com/document/452.html
var jsonString = JSON.stringify(obj);
データ型を指定します
取得される属性値は通常、文字列です。 HTML 指定の type: 強制変換用の 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"}
}
}データ型は、:type タグの代わりに 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>
オプション設定
デフォルト設定
値は常に文字列です(入力名に:typesを使用しない限り)
キーは常に文字列です(デフォルトでは配列に変換する必要があるかどうかは自動的に検出されません)
選択されていないチェックボックスは無視されます
無効な要素は無視されます
カスタム構成
にはチェックされていないチェックボックスが含まれます
serializeJSON は checkboxUncheckedValue 構成をサポートするか、チェックボックスに 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
}
}変換タイプを自動的に検出します
デフォルトのタイプは文字列です。他の型の場合は、構成を通じて変換できます
$('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 form
obj = $('form').find('input').not('[value=""]').serializeJSON();
// For more complicated filtering, you can use a function
obj = $form.find(':input').filter(function () {
return $.trim(this.value).length > 0
}).serializeJSON();配列の順序として整数キーを使用
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": ""
}概要
このプラグインは、非常に豊富な構成と高度なカスタマイズをサポートしており、非常に便利です。
関連する推奨事項:
コード書式設定プラグイン CodeFormatter を Sublime Text 3 にインストールする
jquery ベースの Web ページの日付書式設定プラグイン_jquery
コード書式設定プラグイン CodeFormatter を Sublime Text 3 にインストールする
以上がフォーム整形プラグイン jquery.serializeJSON の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
