Submitting form data in JSON encoding format is another major contribution of HTML5 to the development and evolution of WEB. In the past, our HTML form data was transmitted through key-value. This form of transmission lacks management of data organization and is very primitive. The newly emerging JSON format method to submit form data, convert all data in the form into a certain standard JSON format, and then transfer it to the server side. The data received by the server is a qualified JSON code that can be used directly.
How to declare the form submitted in JSON format
Everyone should be familiar with how to upload a file using a form. It requires adding the enctype="multipart/form-data" statement to the form tag in HTML, which tells the browser to send form data in the upload file mode. The declaration of submitting form in JSON format is similar to this, and it is written as: enctype='application/json'.
Compatibility with old 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 and browsers that have not yet implemented these standards, they cannot recognize what enctype='application/json' represents, so the enctype of the form will automatically degenerate into the default encoding format of application/x-www-form-urlencoded. The server-side code can determine how to receive data based on the enctype value.
Example of format for submitting forms for 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>
// The generated Json data is{
"name": "Bender"
, "hind": "Bitable"
, "shiny": true
}
Example 2 When a form has multiple duplicate form fields, encode it according to the JSON array
<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>
// The generated Json data is{
"bottle-on-wall": [1, 2, 3]
}
Example 3: Form field names form complex structures 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>
// The generated Json data is{
"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>
// The generated Json data is{
"hearbeat": ["thunk", null, "thunk"]
}
Example 5 Multiple array nesting format, unlimited nesting layers
<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>
// The generated Json data is{
"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>
// The generated Json data is{
"wow": {
"such": {
"deep": [
null
, null
, null
, {
"much": {
"power": {
"!": "Amaze"
}
}
}
]
}
}
}
Example 7 File upload
<form enctype='application/json'>
<input type='file' name='file' multiple>
</form>
// Suppose you upload 2 files, the generated Json data is:{
"file": [
{
"type": "text/plain",
"name": "",
"body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="
},
{
"type": "text/plain",
"name": "",
"body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="
}
]
}