HTML5_html5 チュートリアル スキルで JSON 形式を使用してフォームを送信する詳細な例

JSON エンコード形式でのフォーム データの送信は、WEB の開発と進化に対する HTML5 のもう 1 つの大きな貢献です。これまで、HTML フォーム データはキーバリュー方式でサーバー側で送信されていましたが、この形式の送信には管理が不足していました。データ構成の形式は非常に原始的です。新たに登場したフォームデータをJSON形式で送信する方法は、フォーム内のすべてのデータを一定の仕様でJSON形式に変換してサーバーに送信します。サーバーが受信したデータは、直接使用できる修飾された JSON コードです。 JSON 形式でフォーム送信を宣言する方法

フォームを使用してファイルをアップロードする方法については、誰もがよく知っているはずです。これには、HTML の form タグに enctype="multipart/form-data" ステートメントを追加する必要があります。これにより、ブラウザーにフォーム データをファイルで送信するように指示されます。アップロードモード。 JSON 形式の送信フォームの宣言は、enctype='application/json' のように記述されます。
古いブラウザとの互換性

JSON 形式でのフォームの送信は、HTML5 の非常に新しい仕様です。これらの仕様を実装している最新のブラウザーのみが enctype='application/json' のセマンティクスを認識し、フォーム データを JSON 形式に正しくパッケージ化できます。一部の古いブラウザーや、これらの標準をまだ実装していないブラウザーでは、enctype='application/json' が何を表すかを認識できないため、フォームの enctype は自動的に application/x-www-form-urlencoded のデフォルト エンコーディングに低下します。 .フォーマット。サーバー側のコードは、enctype の値に基づいてデータの受信方法を決定できます。
JSONエンコード形式投稿フォームのフォーマット例
例1 基本的な使い方

XML/HTML コードコンテンツをクリップボードにコピー

1. <form enctype='application/json'>
2. <入力 名前='名前' 値='ベンダー'>
3. <選択 名前='hind' >
4. <オプション選択>ビット可能&lt ;/オプション>
5. <オプション>キック可能</オプション>
6. </select>
7. <入力 type='チェックボックス' 名前='shiny' チェック済み>
8. </フォーム>
10. //生成された Json データは
です
11. {
12. "名前": "ベンダー"
13. 、"後": "噛みやすい"
14. 、「光沢」: true
15. }

例 2 フォーム内に同じ名前のフォームフィールドが複数ある場合、それらを JSON 配列としてエンコードします

XML/HTML コードコンテンツをクリップボードにコピー

1. <フォーム enctype='application/json'>
2. <入力 type='数値' 名前='ボトルオンウォール' 値='1'>
3. <入力 type='数値' 名前='ボトルオンウォール' 値='2'>
4. <入力 type='数値' 名前='ボトルオンウォール' 値='3'>
5. </フォーム>
7. // 生成された Json データです
8. {
9. 「ボトルオンウォール」: [1, 2, 3]
10. }

例 3 表ドメイン名が数組で形成される複雑な構造

XML/HTML コード复制コンテンツ到剪贴板

1. <フォーム enctype='application/json'>
2. <入力 名前='pet[種]' 値='ダハット'>
3. <入力 名前='pet[名前]' 値='Hypatia'>
4. <入力 名前='子供[ 1]' 値='テルマ'>
5. <入力 名前='子供[ 0]' 値='アシュリー'>
6. </フォーム>
8. // 生成された Json データ据は
9. {
10. 「ペット」: {
11. 「種」: 「ダハット」
12. , 「名前」: 「ヒュパティア」
13. }
14. 、 "キッズ": ["アシュリー"、 "テルマ"]
15. }

例 4 上の例では、失われた数列番号は null で置き換えられます

XML/HTML コード复制コンテンツ到剪贴板

1. <フォーム enctype='application/json'>
2. <入力 名前='hearbeat[ 0]' 値='サンク'>
3. <入力 名前='hearbeat[ 2]' 値='サンク'>
4. </フォーム>
6. // 生成された Json データです
7. {
8. 「ハートビート」: [「サンク」, null, 「サンク」]
9. }

例5 多重数组嵌套格式，嵌套层数無制限

XML/HTML コード复制コンテンツ到剪贴板

1. <フォーム enctype='application/json'>
2. <入力 名前='pet[ 0][種]' 値='ダハット'>
3. <入力 名前='pet[ 0][名前]' 値='ヒパティア'>
4. <入力 名前='pet[ 1][種]' 値='フェリス・ストゥルタス'>
5. <入力 名前='pet[ 1][名前]' 値='ビリー'>
6. </フォーム>
8. // 生成された Json データです
9. {
10. 「ペット」: [
11. {
12. 「種」: 「ダハット」
13. , 「名前」: 「ヒュパティア」
14. }
15. , {
16. 「種」: 「フェリス・ストゥルトゥス」
17. , 「名前」: 「ビリー」
18. }
19. ]
20. }

例6 真的，没有数组维度制限！

XML/HTML コード复制コンテンツ到剪贴板

1. <form enctype='application/json'>
2. <入力 名前='すごい[など][深い][3][たくさん][パワー][!]' 値='驚き' >
3. </フォーム>
5. // 生成された Json データは
です
6. {
7. 「すごい」: {
8. 「そのような」: {
9. "深い": [
、null
、null
、 、 {
「たくさん」: {
"パワー": {
「!」: 「驚く」
}
21. 例 7 ファイルのアップロード
XML/HTML コード
23. コンテンツをクリップボードにコピー
1. <form enctype='application/json'>
2. <input type='file' 名前='ファイル' 複数>
3. </フォーム>
5. // 2 つのファイルをアップロードすると、生成される Json データは次のとおりです:
6. {
7. "ファイル": [
"タイプ": "テキスト/プレーン"、
"名前": "dahut.txt"、
"ボディ": "
11. REFBQUFBQUFIVVVVVVVVVVVVCEhIQo="
}、
13. "タイプ": "テキスト/プレーン"、
14. "名前": "litany.txt"、
15. "本文": " SSBTDXN0IG5VDCBMZWFYLLLXVHCIBPCIBPCIB0AGUGBWLUZC1RWXSZIUCG
16. =="
]
}