data_json フォームを送信するための JSON エンコード形式の詳細な分析

フォーム データを JSON エンコード形式で送信することも、HTML5 が WEB の発展と進化に大きく貢献しました。これまで、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 基本的な使用法

<form enctype='application/json'>
 <input name='name' value='Bender'>
 <select name='hind'>
  <option selected>Bitable</option>
  <option>Kickable</option>
 </select>
 <input type='checkbox' name='shiny' checked>
</form>

// 生成的Json数据是
{
 "name":  "Bender"
, "hind":  "Bitable"
, "shiny": true
}

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

<form enctype='application/json'>
 <input type='number' name='bottle-on-wall' value='1'>
 <input type='number' name='bottle-on-wall' value='2'>
 <input type='number' name='bottle-on-wall' value='3'>
</form>

// 生成的Json数据是
{
 "bottle-on-wall":  [1, 2, 3]
}

例 3 フォームフィールド名が配列として表示される複雑な構造

<form enctype='application/json'>
 <input name='pet[species]' value='Dahut'>
 <input name='pet[name]' value='Hypatia'>
 <input name='kids[1]' value='Thelma'>
 <input name='kids[0]' value='Ashley'>
</form>

// 生成的Json数据是
{
  "pet": {
    "species": "Dahut"
  ,  "name":   "Hypatia"
  }
,  "kids":  ["Ashley", "Thelma"]
}

例 4 上記の例では、欠落している配列数値が null に置き換えられます

<form enctype='application/json'>
 <input name='hearbeat[0]' value='thunk'>
 <input name='hearbeat[2]' value='thunk'>
</form>

// 生成的Json数据是
{
  "hearbeat":  ["thunk", null, "thunk"]
}

例 5 複数の配列のネスト形式、ネストレベルの数は無制限

<form enctype='application/json'>
 <input name='pet[0][species]' value='Dahut'>
 <input name='pet[0][name]' value='Hypatia'>
 <input name='pet[1][species]' value='Felis Stultus'>
 <input name='pet[1][name]' value='Billie'>
</form>

// 生成的Json数据是
{
 "pet": [
  {
   "species": "Dahut"
  , "name":  "Hypatia"
  }
 , {
   "species": "Felis Stultus"
  , "name":  "Billie"
  }
 ]
}

例 6 実際、配列の次元に制限はありません。

<form enctype='application/json'>
 <input name='wow[such][deep][3][much][power][!]' value='Amaze'>
</form>

// 生成的Json数据是
{
 "wow": {
  "such": {
   "deep": [
    null
   , null
   , null
   , {
     "much": {
      "power": {
       "!": "Amaze"
      }
     }
    }
   ]
  }
 }
}

例 7 ファイルのアップロード

<form enctype='application/json'>
 <input type='file' name='file' multiple>
</form>

// 假设你上传了2个文件, 生成的Json数据是:
{
 "file": [
  {
   "type": "text/plain",
   "name": "dahut.txt",
   "body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="
  },
  {
   "type": "text/plain",
   "name": "litany.txt",
   "body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="
  }
 ]
}