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
}
{
"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]
}
{
"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替代
{
"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.多重数组嵌套格式,嵌套层数无限制
{
"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.没有数组维度限制
{
"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.文件上传
{
"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"
}
]
}
{
"file":[
{
"type":"text/plain",
"name":"dahut.txt",
"body":"xxxxxxxxxx"
},
{
"type":"text/plain",
"name":"litany.txt",
"body":"xxxxxxxxx"
}
]
}