Submit form data in JSON encoded format

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