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

2020-03-24 16:30:44

字体：大中小

来源：转载

供稿：网友

以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献，以前我们的HTML表单数据是通过key-html' target='_blank'>value方式传输的服务器端，这种形式的传输对数据组织缺乏管理，形式十分原始。而新出现的JSON格式提交表单数据方法，将表单里的所有数据转化的具有一定规范的JSON格式，然后传输的服务器端。服务器端接收到的数据是直接可以使用的合格JSON代码。如何声明以JSON格式提交表单大家应该对如何用表单上传一个文件的写法很熟悉，它需要在HTML中form标记上添加 enctype= multipart/form-data 声明，就是告诉浏览器要按上传文件模式发送表单数据。而JSON格式提交表单的声明与此类似，它的写法是： enctype='application/json'。
对老式浏览器的兼容以JSON格式提交表单是HTML5中一种很新的规范，只有实现了这些规范的现代浏览器才能识别 enctype='application/json'的语义，才能正确的将表单数据打包成JSON格式。而对于一些老式浏览器，以及还未实现这些标准的浏览器，它们无法识别 enctype='application/json'代表什么，于是表单的enctype会自动退化成application/x-www-form-urlencoded缺省编码格式。服务器端代码可以根据enctype的值来判断如何接收数据。
JSON编码格式提交表单的格式范例
例1 基本用法XML/HTML Code复制内容到剪贴板
formenctype='application/json' inputname='name'value='Bender' selectname='hind' optionselected Bitable /option option Kickable /option /select inputtype='checkbox'name='shiny'checked /form //生成的Json数据是 { name : Bender , hind : Bitable , shiny :true }
formenctype='application/json' inputtype='number'name='bottle-on-wall'value='1' inputtype='number'name='bottle-on-wall'value='2' inputtype='number'name='bottle-on-wall'value='3' /form //生成的Json数据是 { bottle-on-wall :[1,2,3] }
formenctype='application/json' inputname='pet[species]'value='Dahut' inputname='pet[name]'value='Hypatia' inputname='kids[1]'value='Thelma' inputname='kids[0]'value='Ashley' /form //生成的Json数据是 { pet :{ species : Dahut , name : Hypatia } , kids :[ Ashley , Thelma ] }
formenctype='application/json' inputname='hearbeat[0]'value='thunk' inputname='hearbeat[2]'value='thunk' /form //生成的Json数据是 { hearbeat :[ thunk ,null, thunk ] }
formenctype='application/json' inputname='pet[0][species]'value='Dahut' inputname='pet[0][name]'value='Hypatia' inputname='pet[1][species]'value='FelisStultus' inputname='pet[1][name]'value='Billie' /form //生成的Json数据是 { pet :[ { species : Dahut , name : Hypatia } ,{ species : FelisStultus , name : Billie } ] }
formenctype='application/json' inputname='wow[such][deep][3][much][power][!]'value='Amaze' /form //生成的Json数据是 { wow :{ such :{ deep :[ null ,null ,null ,{ much :{ power :{ ! : Amaze } } } ] } } }
formenctype='application/json' inputtype='file'name='file'multiple /form //假设你上传了2个文件,生成的Json数据是: { file :[ { type : text/plain , name : dahut.txt , body : REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo= }, { type : text/plain , name : litany.txt , body : SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg== } ] }html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：如何在HTML中使用JavaScript

下一篇：angularjs是什么？为什么用angularjs？