In-depth analysis of JSON encoding format to submit form data_json

Submitting form data in JSON encoding format is another major contribution of HTML5 to the development and evolution of the WEB. In the past, our HTML form data was transmitted on the server side through the key-value method. This form of transmission lacked management of data organization. The form is very primitive. The newly emerged method of submitting form data in JSON format converts all data in the form into a JSON format with certain specifications, and then transmits it to the server. The data received by the server is qualified JSON code that can be used directly.

How to declare form submission in JSON format

Everyone should be familiar with how to use a form to upload a file. It requires adding the enctype="multipart/form-data" statement to the form tag in HTML, which tells the browser to send the form data in the file upload mode. The declaration of the JSON format submission form is similar to this. It is written as: enctype='application/json'.

Compatibility with older browsers

Submitting forms in JSON format is a very new specification in HTML5. Only modern browsers that implement these specifications can recognize the semantics of enctype='application/json' and correctly package form data into JSON format. For some old browsers, as well as browsers that have not yet implemented these standards, they cannot recognize what enctype='application/json' represents, so the form's enctype will automatically degrade to the application/x-www-form-urlencoded default encoding. Format. Server-side code can determine how to receive data based on the value of enctype.

Format example of submission form in JSON encoding format

Example 1 Basic usage

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

Example 2 When there are multiple form fields with the same name in the form, encode them as JSON arrays

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

Example 3 A complex structure in which form field names appear as arrays

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

Example 4 In the above example, the missing array number value will be replaced by null

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

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

Example 5 Multiple array nesting format, unlimited number of nesting levels

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

Example 6 Really, there is no array dimension limit!

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

Example 7 File upload

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