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"
          }
          ]
     }