In-depth analysis of form data submitted in JSON encoding format

In-depth analysis of form data submitted in JSON encoding format

This article mainly introduces the in-depth analysis of the information about the form data submitted in JSON encoding format. For more information, see

Submitting form data in JSON encoding format is another major contribution of HTML5 to WEB development and evolution. In the past, our HTML form data was transmitted through the key-value Method on the server side, this form of transmission lacks management of data Organizations, and the form is very primitive. The New Method for submitting form data in JSON format converts all the data in the form into a standard JSON format and then transmits the data to the server. The data received by the server is a qualified JSON code that can be directly used.

How to declare a form to be submitted in JSON format

You should be familiar with how to upload a file using a form. It needs to add the enctype = "multipart/form-data" Statement on the form mark in HTML, this means that the browser needs to send form data in the Upload File mode. Similar to the Declaration for submitting forms in JSON format, the statement is: enctype = 'application/json '.

Compatibility with older browsers

Submitting forms in JSON format is a new standard in HTML5. Only modern browsers that have implemented these specifications can recognize the semantics of enctype = 'application/json, in order to correctly package form data into JSON format. For some old-fashioned browsers and browsers that have not yet implemented these standards, they cannot recognize what enctype = 'application/json' represents, the form's enctype is automatically degraded to the application/x-www-form-urlencoded default encoding format. The server code can determine how to receive data based on the value of enctype.

Example of the format of the submitted form in JSON encoding 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>   // The generated Json data is { "Name": "Bender" , "Hind": "Bitable" , "Shiny": true }

Example 2 if a form contains multiple form fields with duplicate names, the fields are encoded in JSON array.

?

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 names form an array of complex structures

?

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 = 'hybrid'> <Input name = 'kids [1] 'value = 'thelm'> <Input name = 'kids [0] 'value = 'ashley'> </Form>   // The generated Json data is { "Pet ":{ "Species": "Dahut" , "Name": "Hypatia" } , "Kids": ["Ashley", "Thelma"] }

Example 4 in the preceding example, the missing array serial number value is replaced by 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>   // The generated Json data is { "Hearbeat": ["thunk", null, "thunk"] }

Example 5 multiple array nesting formats with unlimited number of nested 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 = 'hybrid'> <Input name = 'Pet [1] [species] 'value = 'felis Stultus '> <Input name = 'Pet [1] [name] 'value = 'lily'> </Form>   // The generated Json data is { "Pet ":[ { "Species": "Dahut" , "Name": "Hypatia" } ,{ "Species": "Felis Stultus" , "Name": "Billie" } ] }

Example 6 is true. There is no restriction on the array dimension!

?

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>   // The 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 10 11 12 13 14 15 16 17 18 19

<Form enctype = 'application/json'> <Input type = 'file' name = 'file' multiple> </Form>   // Assume that you have uploaded two files and the generated Json data is: { "File ":[ { "Type": "text/plain ", "Name": "dahu.txt ", "Body": "refbqufbqufivvvvvvvvvvvcehiqo =" }, { "Type": "text/plain ", "Name": "litany.txt ", "Body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg =" } ] }