For example, use JSON format to submit a form in HTML5

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

xml/html Code copy content to clipboard

1. <form enctype= ' Application/json ' >
2. <input name= ' name ' value= ' Bender ' >
3. <select name= ' hind ' >
4. <option selected>bitable</option>
5. <option>Kickable</option>
6. </select>
7. <input type= ' checkbox ' name= ' shiny ' checked>
8. </form>
10. The generated JSON data is
11. {
12. ' Name ': ' Bender '
13. , "Hind": "Bitable"
14. , "Shiny": True
15. }

Example 2 encoding by JSON array when there are multiple form fields with duplicate names in the form

xml/html Code copy content to clipboard

1. <form enctype= ' Application/json ' >
2. <input type= ' number ' name= ' bottle-on-wall ' value= ' 1 ' >
3. <input type= ' number ' name= ' Bottle-on-wall ' value= ' 2 ' >
4. <input type= ' number ' name= ' Bottle-on-wall ' value= ' 3 ' >
5. </form>
7. The generated JSON data is
8. {
9. "Bottle-on-wall": [1, 2, 3]
10. }

Example 3 form domain name to form a complex structure that appears in an array

xml/html code to copy content to clipboard

1. <form enctype= ' Application/json ' >
2. <input name= ' pet[species] ' value= ' Dahut ' >
3. <input name= ' pet[name] ' value= ' Hypatia ' >
4. <input name= ' kids[1] ' value= ' Thelma ' >
5. <input name= ' kids[0] ' value= ' Ashley ' >
6. </form>
8. The generated JSON data is
9. {
10. "Pet": {
11. "Species": "Dahut"
12. , "name": "Hypatia"
13. }
14. , "Kids": ["Ashley", "Thelma"]
15. }

Example 4 in the above example, the missing array ordinal value is substituted with null

xml/html code to copy content to clipboard

1. <form enctype= ' Application/json ' >
2. <input name= ' hearbeat[0] ' value= ' thunk ' >
3. <input name= ' hearbeat[2] ' value= ' thunk ' >
4. </form>
6. The generated JSON data is
7. {
8. "Hearbeat": ["thunk", NULL, "Thunk"]
9. }

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

xml/html Code copy content to clipboard

1. <form enctype= ' Application/json ' >
2. <input name= ' pet[0][species] ' value= ' Dahut ' >
3. <input name= ' pet[0][name] ' value= ' Hypatia ' >
4. <input name= ' pet[1][species] ' value= ' Felis stultus ' >
5. <input name= ' pet[1][name] ' value= ' Billie ' >
6. </form>
8. The generated JSON data is
9. {
10. "Pet": [
11. {
12. "Species": "Dahut"
13. , "name": "Hypatia"
14. }
15. , {
16. "Species": "Felis stultus"
17. , "name": "Billie"
18. }
19. ]
20. }

Example 6 really, there is no array dimension limit!

xml/html Code copy content to clipboard

1. <form enctype= ' Application/json ' >
2. <input name= ' wow[such][deep][3][much][power][!] ' value= ' amaze ' >
3. </form>
5. The generated JSON data is
6. {
7. "Wow": {
8. "Such": {
9. "Deep": [
10. Null
11. Null
12. Null
13. , {
14. "Much": {
15. "Power": {
16. "!": "Amaze"
17. }
18. }
19. }
20. ]
21. }
22. }
23. }

Example 7 file Upload

xml/html Code copy content to clipboard

1. <form enctype= ' Application/json '
2. <input type= ' file ' name= ' file ' Multiple>
3. & L T;/form>
4.  
5. //Assuming you uploaded 2 files, the generated JSON data is:
6. {
7. "file": [
8. {
]
9. ' type ': ' Text/plain ',
10. ' name ': ' Dahut.txt ',
11. "Body": "refbqufbqufivvvvvvvvvvvvvcehiqo="
12. },
13. {
14. ' type ': ' Text/plain ',
15. ' name ': ' Litany.txt ',
16. ' body ': ssbtdxn0ig5vdcbm zwfyllxurmvhcibpcyb0agugbwluzc1rawxszxiucg== "
17. }
18. ]
19. }