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

Source: Internet
Author: User
Tags file upload html form json

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== '
}

}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.