Submit form data in JSON encoded format

Source: Internet
Author: User

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

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.