Analisis mendalam format pengekodan JSON untuk menyerahkan borang data_json

Menyerahkan data borang dalam format pengekodan JSON ialah satu lagi sumbangan utama HTML5 kepada pembangunan dan evolusi WEB Pada masa lalu, data borang HTML kami telah dihantar pada bahagian pelayan melalui kaedah nilai kunci ini kurang pengurusan organisasi data. Bentuknya sangat primitif. Kaedah yang baru muncul untuk menyerahkan data borang dalam format JSON menukar semua data dalam borang kepada format JSON dengan spesifikasi tertentu, dan kemudian menghantarnya ke pelayan. Data yang diterima oleh pelayan adalah kod JSON yang layak yang boleh digunakan secara langsung.

Cara mengisytiharkan penyerahan borang dalam format JSON

Semua orang harus biasa dengan cara menggunakan borang untuk memuat naik fail. Ia memerlukan penambahan pernyataan enctype="multipart/form-data" pada teg borang dalam HTML, yang memberitahu penyemak imbas untuk menghantar data borang dalam. mod muat naik fail. Pengisytiharan borang penyerahan format JSON adalah serupa dengan ini. Ia ditulis sebagai: enctype='application/json'.

Keserasian dengan penyemak imbas lama

Menyerahkan borang dalam format JSON ialah spesifikasi yang sangat baharu dalam HTML5 Hanya penyemak imbas moden yang melaksanakan spesifikasi ini boleh mengecam semantik enctype='application/json' dan membungkus data borang dengan betul ke dalam format JSON. Untuk sesetengah penyemak imbas lama, serta penyemak imbas yang belum lagi melaksanakan piawaian ini, mereka tidak dapat mengenali apa yang diwakili oleh enctype='application/json', jadi enctype borang akan secara automatik menurun kepada pengekodan lalai application/x-www-form-urlencoded . Kod sebelah pelayan boleh menentukan cara menerima data berdasarkan nilai enctype.

Format contoh borang penyerahan dalam format pengekodan JSON

Contoh 1 Penggunaan asas

<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
}

Contoh 2 Apabila terdapat berbilang medan borang dengan nama yang sama dalam borang, kodkannya sebagai tatasusunan 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]
}

Contoh 3 Struktur kompleks di mana nama medan bentuk muncul sebagai tatasusunan

<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"]
}

Contoh 4 Dalam contoh di atas, nilai nombor tatasusunan yang hilang akan digantikan dengan null

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

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

Contoh 5 Format berbilang sarang tatasusunan, bilangan tahap sarang tanpa had

<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"
  }
 ]
}

Contoh 6 Sungguh, tiada had dimensi tatasusunan!

<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"
      }
     }
    }
   ]
  }
 }
}

Contoh 7 muat naik fail

<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=="
  }
 ]
}