Submit form data in HTML5 for transmission in JSON-encoded format

Submitting form data in JSON-encoded format is HTML5 's further contribution to the evolution of web development, previously our HTML form data is transmitted through the key-value of the server side, this form of transmission on the data organization, the lack of management, the form is very primitive. The new JSON format submits the form data method, converts all the data in the form to a certain canonical JSON format, and then transmits the server side. The data received on the server side is a qualified JSON code that can be used directly. How

declares that a form is submitted in JSON format

You should be familiar with how to upload a file with your form, and it needs to add enctype= "multipart/form-data" declarations to the form tag in HTML. is to tell the browser to send the form data in the upload file mode. The JSON format submission form is similar to the one in which it is written: enctype= ' Application/json '.
compatible with older browsers

submitting forms in JSON format a very new specification in HTML5, only a modern browser that implements these specifications can recognize enctype= ' application/ JSON ' semantics to properly package the form data into JSON format. For some older browsers, and browsers that have not yet implemented these standards, they do not recognize what enctype= ' Application/json ' represents, so the form's enctype automatically degenerates to application/ x-www-form-urlencoded the default encoding format. The server-side code can determine how to receive data based on the value of the enctype.
JSON-encoded format example for submitting a form

Example 1 basic usage

The code is as follows	Copy Code
<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 encoding by JSON array when there are multiple form fields with duplicate names in the form

The code is as follows	Copy Code
<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 domain name to form a complex structure that appears in an array

The code is as follows	Copy Code
<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 ordinal value is substituted with null

The code is as follows	Copy Code
<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 multi-array nested format with unlimited number of nesting layers

The code is as follows	Copy Code
<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!

The code is as follows	Copy Code
<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

code is as follows	copy code
<form Enctype= ' Application/json ' <input type= ' file ' name= ' file ' Multiple> </form>   // If you upload 2 files, the resulting JSON data is: { ' file ': [ { ' type ': ' Text/plain ', ' name ': ' Dahut.txt ', ' body ': ' Refbquf Bqufivvvvvvvvvvvvvcehiqo= ' }, { ' type ': ' Text/plain ', ' name ': ' Litany.txt ', ' body ': ' ssbtdxn0ig5vdcbmzwfyllxurmvhcibpcyb0agugbwluzc1rawxszxiucg== ' } }