Deep analysis of JSON encoded formats submitting form data

This article mainly introduces the in-depth analysis of JSON coding format to submit form data, the need for friends can refer to the following

Submitting form data in JSON-encoded format is HTML5 's further contribution to the evolution of web development, where our HTML form data is a server-side transmitted via Key-value, a form of transmission that is very primitive in its lack of management of the data organization. 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 to declare a form to be submitted in JSON format

You should be familiar with how to use a form to upload a file, it needs to add a enctype= "Multipart/form-data" statement to the HTML form tag, which tells 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 '.

Compatibility with older browsers

Submitting forms in JSON format a very new specification in HTML5, only a modern browser that implements these specifications can recognize the semantics of enctype= ' Application/json ' in order 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.

Sample format for submitting forms in JSON encoded format

Example 1 Basic usage

?

1 2 3 4, 5 6 7 8 9 10 11 12 13 14 15

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

?

1 2 3 4 5 6 7 8 9 10

<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

?

1 2 3 4, 5 6 7 8 9 10 11 12 13 14 15

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

?

1 2 3 4 5 6 7 8 9

<form enctype= ' Application/json ' > <input name= ' hearbeat[0] ' value= ' thunk ' > <input name= ' hearbeat[2 ' Value= ' thunk ' > </form>//Generated JSON data is {"Hearbeat": ["thunk", NULL, "Thunk"]}

Example 5 multi-array nested format with unlimited number of nesting layers

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19-20

<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>//Generated JSON data is {"Pet": [{"Species": "Dahut", "name": "Hypatia"}, {"Species": "Fel Is Stultus "," name ":" Billie "}]}

Example 6 really, there is no array dimension limit!

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22-23

<form enctype= ' Application/json ' > <input name= ' wow[such][deep][3][much][power][!] ' value= ' Amaze ' > </ Form>//generated JSON data is {"Wow": {"such": {"deep": [NULL, NULL, NULL, {"Much": {"Power": {"!": "Amaze"}}]} } }

Example 7 file Upload

?

1 2 3 4 5 6 7 8 9

<form enctype= ' Application/json ' > <input type= ' file ' name= ' file ' Multiple> </form>  /Assuming you uploaded 2 files, the generated JSON data is: {"file": [{"Type": "Text/plain", "name": "Dahut.txt", "bod Y ":" refbqufbqufivvvvvvvvvvvvvcehiqo= "}, {" Type ":" Text/plain "," name ":" Litany.txt "," Body ":" ssbtdxn0ig5vdcbmzwfyllxurmvhcibpcyb0agugbwluzc1rawxszxiucg== '}]}