Submitting form data in JSON-encoded format is another major contribution to the evolution of the Web, where our HTML form data was HTML5 by Key-value, and this form of transmission is very primitive in the form of a lack of management of the data organization. The new JSON format submits the form data method, converting all the data in the form into a certain canonical JSON format, and then transferring 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 upload a file using a form, it needs to add the enctype= "Multipart/form-data" declaration on the form tag in HTML to tell the browser to send the form data in the upload file mode. The Declaration of a form submitted in JSON format is similar to this: Enctype= ' Application/json '.
Compatibility with older browsers
Submitting a form in JSON format is a very new specification in HTML5, and only modern browsers that implement these specifications can recognize the semantics of enctype= ' Application/json ' in order to properly package form data in JSON format. For some older browsers, and browsers that have not yet implemented these standards, they do not recognize what enctype= ' Application/json ' stands for, so the enctype of the form will automatically degenerate into application/ x-www-form-urlencoded the default encoding format. Server-side code can determine how to receive data based on the value of Enctype.
Sample format for submitting forms in JSON encoded 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 there are multiple form fields with duplicate names in the form, encode by 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>//generated JSON data is { "Bottle-on-wall": [1, 2, 3]}
Example 3 form field names are complex structures that appear 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= ' The JSON data generated by Ashley ' ></form>//is { "pet": { "species": "Dahut" , "name": " Hypatia " }, " kids ": [" Ashley "," Thelma "]}
Example 4 in the example above, the missing array ordinal value will be substituted with null
<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, unlimited number of 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>//generated JSON data is { "pet": [ { "species": " Dahut " , " name ": " Hypatia " } , { " species ": " Felis stultus " , ' Name ': ' Billie ' } ]}
Example 6 really, no array dimension limit!
<form enctype= ' Application/json ' > <input name= ' wow[such][deep][3][much][power][!] ' The JSON data generated by value= ' amaze ' ></form>//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 resulting JSON data is: { "file": [ { "type": "Text/plain", "name": "Dahut.txt", "body": " Refbqufbqufivvvvvvvvvvvvvcehiqo= " }, { " type ":" Text/plain ", " name ":" Litany.txt ", " body ":" ssbtdxn0ig5vdcbmzwfyllxurmvhcibpcyb0agugbwluzc1rawxszxiucg== " } ]}
Submit form data in JSON encoded format