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


Posted in HTML / CSS onJune 16, 2015

以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-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复制内容到剪贴板
  1. <form enctype='application/json'>  
  2.   <input name='name' value='Bender'>  
  3.   <select name='hind'>  
  4.     <option selected>Bitable</option>  
  5.     <option>Kickable</option>  
  6.   </select>  
  7.   <input type='checkbox' name='shiny' checked>  
  8. </form>  
  9.     
  10. // 生成的Json数据是   
  11. {   
  12.   "name":   "Bender"   
  13. , "hind":   "Bitable"   
  14. , "shiny":  true   
  15. }  

例2 当表单存在多个重名的表单域时,按JSON数组编码

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype='application/json'>  
  2.       <input type='number' name='bottle-on-wall' value='1'>  
  3.       <input type='number' name='bottle-on-wall' value='2'>  
  4.       <input type='number' name='bottle-on-wall' value='3'>  
  5.     </form>  
  6.         
  7.     // 生成的Json数据是   
  8.     {   
  9.       "bottle-on-wall":   [1, 2, 3]   
  10.     }  

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

XML/HTML Code复制内容到剪贴板
  1. <form enctype='application/json'>  
  2.   <input name='pet[species]' value='Dahut'>  
  3.   <input name='pet[name]' value='Hypatia'>  
  4.   <input name='kids[1]' value='Thelma'>  
  5.   <input name='kids[0]' value='Ashley'>  
  6. </form>  
  7.     
  8. // 生成的Json数据是   
  9. {   
  10.     "pet":  {   
  11.         "species":  "Dahut"   
  12.     ,   "name":     "Hypatia"   
  13.     }   
  14. ,   "kids":   ["Ashley", "Thelma"]   
  15. }  

例4 在上面的例子中,缺失的数组序号值将以null替代

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype='application/json'>  
  2.       <input name='hearbeat[0]' value='thunk'>  
  3.       <input name='hearbeat[2]' value='thunk'>  
  4.     </form>  
  5.         
  6.     // 生成的Json数据是   
  7.     {   
  8.         "hearbeat":   ["thunk", null, "thunk"]   
  9.     }  

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

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype='application/json'>  
  2.       <input name='pet[0][species]' value='Dahut'>  
  3.       <input name='pet[0][name]' value='Hypatia'>  
  4.       <input name='pet[1][species]' value='Felis Stultus'>  
  5.       <input name='pet[1][name]' value='Billie'>  
  6.     </form>  
  7.         
  8.     // 生成的Json数据是   
  9.     {   
  10.         "pet":  [   
  11.             {   
  12.                 "species":  "Dahut"   
  13.             ,   "name":     "Hypatia"   
  14.             }   
  15.         ,   {   
  16.                 "species":  "Felis Stultus"   
  17.             ,   "name":     "Billie"   
  18.             }   
  19.         ]   
  20.     }  

例6 真的,没有数组维度限制!

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype='application/json'>  
  2.       <input name='wow[such][deep][3][much][power][!]' value='Amaze'>  
  3.     </form>  
  4.         
  5.     // 生成的Json数据是   
  6.     {   
  7.         "wow":  {   
  8.             "such": {   
  9.                 "deep": [   
  10.                     null   
  11.                 ,   null   
  12.                 ,   null   
  13.                 ,   {   
  14.                         "much": {   
  15.                             "power": {   
  16.                                 "!":  "Amaze"   
  17.                             }   
  18.                         }   
  19.                     }   
  20.                 ]   
  21.             }   
  22.         }   
  23.     }  

例7 文件上传

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype='application/json'>  
  2.      <input type='file' name='file' multiple>  
  3.    </form>  
  4.        
  5.    // 假设你上传了2个文件, 生成的Json数据是:   
  6.    {   
  7.        "file": [   
  8.            {   
  9.                "type": "text/plain",   
  10.                "name": "dahut.txt",   
  11.                "body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="   
  12.            },   
  13.            {   
  14.                "type": "text/plain",   
  15.                "name": "litany.txt",   
  16.                "body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="   
  17.            }   
  18.        ]   
  19.    }   
HTML / CSS 相关文章推荐
css3新增颜色表示方式分享
Apr 15 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
html5 标签
Jul 16 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
带你认识HTML5中的WebSocket
May 22 #HTML / CSS
用HTML5制作视频拼图的教程
May 13 #HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 #HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 #HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 #HTML / CSS
用HTML5制作烟火效果的教程
May 12 #HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 #HTML / CSS
You might like
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php集成动态口令认证
2016/07/21 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
javascript定义类和类的实现实例详解
2015/12/01 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
Python 解析XML文件
2009/04/15 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
python创建关联数组(字典)的方法
2015/05/04 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python实现银行账户系统
2021/02/22 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
教师个人剖析材料
2014/02/05 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
横店影视城导游词
2015/02/06 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
初中语文教师研修日志
2015/11/13 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python