HTML5 JSON格式提交表单

HTML5可以实现以JSON格式提交表单

1.基本用法

<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>   

  生成的JSON数据是
     {
          "name":"Bender",
          "hind":"Bitable",
          "shiny":true
     }

2.当表单存在多个重名的表单域时，按JSON数据组编码

<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>

生成的JSON数据是
     {
          "bottle-on-wall":[1,2,3]
     }

3.表单域名称以数组形式出现的复杂结构 

<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>

 生成的JSON数据是
     {
          "pet":{
               "species":"Dahut",
               "name":"Hypatia"
          },
          "kids":["Ashley","Thelma"]
     }
4.在上面的例子中，缺失的数组序号值将以null替代

<form enctype='application/json'>
          <input name='hearbeat[0]' value='thunk'>
          <input name='hearbeat[2]' value='thunk'>
</form>

生成的JSON数据是
     {
          "hearbeat":["thunk",null,"thunk"]
     }
5.多重数组嵌套格式，嵌套层数无限制

<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>

 生成的JSON数据是
     {
          "pet":[
          {
               "species":"Dahut",
               "name":"Hypatia"
          },
          {
               "species":"Felis Stultus",
               "name":"Billie"
          }
          ]
     }
6.没有数组维度限制

<form enctype='application/json'>
          <input name='wow[such][deep][3][much][power][!]' value='Amaze'>
</form>

 生成的JSON数据是
     {
          "wow":{
               "such":{
                    "deep":[
                         null,
                         null,
                         null,
                         {
                              "much":{
                                   "power":{
                                        "!":"Amaze"
                                   }
                              }
                         }
                    ]
               }
          }
     }
7.文件上传

<form enctype='application/json'>
          <input type='file' name='file' multipart>
</form>

  假设上传了两个文件，生成的JSON数据是
     {
          "file":[
          {
               "type":"text/plain",
               "name":"dahut.txt",
               "body":"xxxxxxxxxx"
          },
          {
               "type":"text/plain",
               "name":"litany.txt",
               "body":"xxxxxxxxx"
          }
          ]
     }