フォーム整形プラグイン jquery.serializeJSON の詳細説明

この記事では主にフォーム書式設定プラグイン jquery.serializeJSON について詳しく説明します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

前書き

フロントエンドが大量のデータ送信を含むフォームを処理する場合、Form を使用してページを直接送信および更新することに加えて、フォーム情報をデータ オブジェクトに収集し、それを送信するという要件がよく発生します。アヤックス。

複雑なフォームを扱う場合、フィールドの値を一つ一つ手動で判断して処理する必要があり、非常に面倒です。次に紹介するプラグインはこの問題を解決します。

serializeJSON について

jquery.serializeJSON を使用すると、.serializeJSON() メソッドを呼び出して、jQuery または Zepto に基づいたページ内の JS オブジェクトにフォーム データをシリアル化できます。

使用するには

それをjQueryまたはZeptoに導入するだけです

 <script></script>
<script></script>

例

HTMLフォーム(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 との互換性に注意してください)。

The Definitive Guide to JavaScript (第 6 版) (中国語版) http://www.gooln.com/document/452.html

 var jsonString = JSON.stringify(obj);

データ型を指定します

取得される属性値は通常、文字列です。 HTML 指定の type: 強制変換用の 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, // <p> データ型は、:type タグの代わりに data-value-type 属性で指定することもできます。 </p><pre class="brush:php;toolbar:false">

         

オプション設定

デフォルト設定

値は常に文字列です(入力名に:typesを使用しない限り)

キーは常に文字列です(デフォルトでは配列に変換する必要があるかどうかは自動的に検出されません)

選択されていないチェックボックスは無視されます

無効な要素は無視されます

カスタム構成

にはチェックされていないチェックボックスが含まれます

serializeJSON は checkboxUncheckedValue 構成をサポートするか、チェックボックスに 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
 }
}

変換タイプを自動的に検出します

デフォルトのタイプは文字列です。他の型の場合は、構成を通じて変換できます

$('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, // <p>カスタム タイプ</p><p>customTypes を使用して、カスタム タイプを構成したり、デフォルトのタイプ ($.serializeJSON.defaultOptions.defaultTypes) をオーバーライドしたりできます)</p><pre class="brush:php;toolbar:false">

     

$('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",    // <p>空のフォームフィールドを無視</p><pre class="brush:php;toolbar:false">// 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').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 サイトの他の関連記事を参照してください。