UDN-企业互联网技术人气社区

板块导航

浏览  : 1572
回复  : 4

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

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-15 11:51:44 | 显示全部楼层 |阅读模式
本帖最后由 友美C_cup 于 2015-8-8 12:21 编辑


  以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 基本用法

  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数组编码

  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 表单域名称以数组形成出现的复杂结构

  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替代

  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 多重数组嵌套格式,嵌套层数无限制  

  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 真的,没有数组维度限制

  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 文件上传

  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.    }  
复制代码

相关帖子

发表于 2015-8-10 19:22:08 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

发表于 2015-8-14 11:47:19 | 显示全部楼层
其实HTML5技术优势主要体现在能帮助企业降低开发成本、缩短开发周期、可以跨设备等
使用道具 举报

回复

发表于 2015-8-14 11:49:16 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
点评 ( 1 ) 收起 / 展开点评

友美C_cup 2015年08月14日 16:50 详情 回复

人家会努力啦

使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-14 16:50:10 | 显示全部楼层
死神的妾 发表于 2015-8-14 11:49
LZ敢整点更有创意的不?兄弟们等着围观捏~

人家会努力啦
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部