举例详解HTML5中使用JSON格式提交表单

avatar 2015年9月6日02:00:56 评论

[callout class="info或warning或danger" title=""]这篇文章主要介绍了举例详解HTML5中使用JSON格式提交表单,包括多重数组嵌套等方法的使用演示,需要的朋友可以参考下[/callout]

以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始。而新出现的JSON格式提交表单数据方法,将表单里的所有数据转化的具有一定规范的JSON格式,然后传输的服务器端。服务器端接收到的数据是直接可以使用的合格JSON代码。如何声明以JSON格式提交表单

以JSON格式提交表单是HTML5中一种很新的规范,只有实现了这些规范的现代浏览器才能识别 enctype='application/json'的语义,才能正确的将表单数据打包成JSON格式。而对于一些老式浏览器,以及还未实现这些标准的浏览器,它们无法识别 enctype='application/json'代表什么,于是表单的enctype会自动退化成application/x-www-form-urlencoded缺省编码格式。服务器端代码可以根据enctype的值来判断如何接收数据。

JSON编码格式提交表单的格式范例

例1 基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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数组编码

1
2
3
4
5
6
7
8
9
10
<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 表单域名称以数组形成出现的复杂结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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替代

1
2
3
4
5
6
7
8
9
<form enctype='application/json'>  
  <input name='hearbeat[0]' value='thunk'>  
  <input name='hearbeat[2]' value='thunk'>  
</form>  
     
// 生成的Json数据是   
{   
    "hearbeat":   ["thunk"null"thunk"]   
}  

例5 多重数组嵌套格式,嵌套层数无限制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 真的,没有数组维度限制!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 文件上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form enctype='application/json'>  
 <input type='file' name='file' multiple>  
</form>  
    
// 假设你上传了2个文件, 生成的Json数据是:   
{   
   "file": [   
       {   
           "type""text/plain",   
           "name""dahut.txt",   
           "body""REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="   
       },   
       {   
           "type""text/plain",   
           "name""litany.txt",   
           "body""SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="   
       }   
   ]   
}   
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: