首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / html5 阅读数： 2083
收藏 0 赞 0 分享

以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.    }   
更多精彩内容其他人还在看

突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)

前面已经总结了主要的API扩展(应用缓存/服务端消息/桌面通知),下面的几个只有在特定的场合才能发挥它的潜质，无一例外，IE均不支持,桌面通知目前只有Chrome支持,感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

HTML5中加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等除了这种整个页面的结构型元素，html5也加入了块级别的语义元素,感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

在HTML5增强的元素中，最值得关注的就是表单元素;在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可以详细了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代

WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件,看到此处是不是感觉特别惊讶啊，WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容,感兴趣的朋友可以了
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍

前面我们看到了使用原生的WebGL API开发是多么的累,只因如此大量的WebGL框架被开发出来，这些框架不同程度的封装了创建3D场景的各种要素你可以快速创建需要的3D场景，感兴趣的朋友可以了解下，或许本文对你有所帮助
收藏 0 赞 0 分享

HTML中fieldset标签概述及使用方法

之前HTML没有好好学，导致以前看到控件组样式感觉很新奇,fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段,接下来对HTML中fieldset标签的使用进行详细解读，感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5中微数据概述及在搜索引擎中的使用举例

HTML5微数据规范是标记内容的一种方式，用于描述特定的信息类型，例如评论、人物信息或活动。微数据使用 HTML 标记(常为 span>或 div)中的简单属性为项和属性指定简要的描述性名称
收藏 0 赞 0 分享

html5新增的属性和废除的属性简要概述

HTML5中，在新增加和废除很多元素的同时，也增加和废除了很多属性比如表单相关的属性/链接相关属性是新增的而HTML4中一些属性就被废除掉了，感兴趣的你可以了解下，或许对你学习html5有所帮助
收藏 0 赞 0 分享

html5的新增的标签和废除的标签简要概述

HTML5中在新增加和废除很多标签的同时，也增加和废除了很多标签比如新增的结构标签:section元素/video元素等等，感兴趣的朋友可以了解下，希望本文的知识点对你有所帮助
收藏 0 赞 0 分享

html5配合css3实现带提示文字的输入框(摆脱js)

webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合，感兴趣的你可以参考下本文或许可以帮助到你
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22