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

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, 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>
    9. The generated JSON data is
    10. {
    11. ' Name ': ' Bender '
    12. , "Hind": "Bitable"
    13. , "Shiny": True
    14. }

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>
    6. The generated JSON data is
    7. {
    8. "Bottle-on-wall": [1, 2, 3]
    9. }

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>
    7. The generated JSON data is
    8. {
    9. "Pet": {
    10. "Species": "Dahut"
    11. , "name": "Hypatia"
    12. }
    13. , "Kids": ["Ashley", "Thelma"]
    14. }

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>
    5. The generated JSON data is
    6. {
    7. "Hearbeat": ["thunk", NULL, "Thunk"]
    8. }

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>
    7. The generated JSON data is
    8. {
    9. "Pet": [
    10. {
    11. "Species": "Dahut"
    12. , "name": "Hypatia"
    13. }
    14. , {
    15. "Species": "Felis stultus"
    16. , "name": "Billie"
    17. }
    18. ]
    19. }

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>
    4. The generated JSON data is
    5. {
    6. "Wow": {
    7. "Such": {
    8. "Deep": [
    9. Null
    10. Null
    11. Null
    12. , {
    13. "Much": {
    14. "Power": {
    15. "!": "Amaze"
    16. }
    17. }
    18. }
    19. ]
    20. }
    21. }
    22. }

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. ]
    10. ' type ': ' Text/plain ',
    11. ' name ': ' Dahut.txt ',
    12. "Body": "refbqufbqufivvvvvvvvvvvvvcehiqo="
    13. },
    14. {
    15. ' type ': ' Text/plain ',
    16. ' name ': ' Litany.txt ',
    17. ' body ': ssbtdxn0ig5vdcbm zwfyllxurmvhcibpcyb0agugbwluzc1rawxszxiucg== "
    18. }
    19. ]
    20. }   

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.