以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. }

JSON编码格式提交表单数据详解的更多相关文章

  1. tomcat中间件提交表单数据量过大警告处理方案

    http://www.bubuko.com/infodetail-976418.html http://www.cnblogs.com/yg_zhang/p/4248061.html tomcat中间 ...

  2. Spring Boot(三):RestTemplate提交表单数据的三种方法

    http://blog.csdn.net/yiifaa/article/details/77939282 ********************************************** ...

  3. jsp提交表单数据乱码,内置对象,以及过滤器

    jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...

  4. ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题

    今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...

  5. easyui提交表单数据的时候如何防止二次提交

    在前端提交数据的时候有时候可能会由于网络延迟等原因,我们在等待的时候会多次点击保存按钮,这可能会导致我们一次输入的数据多次提交,导致数据重复.最近在做项目的时候碰到了这个问题,先说一点,这个问题的解决 ...

  6. Java构造和解析Json数据的两种方法详解二

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...

  7. Skip List(跳跃表)原理详解与实现【转】

    转自:http://dsqiu.iteye.com/blog/1705530 Skip List(跳跃表)原理详解与实现 本文内容框架: §1 Skip List 介绍 §2 Skip List 定义 ...

  8. Java构造和解析Json数据的两种方法详解二——org.json

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...

  9. Java构造和解析Json数据的两种方法详解一——json-lib

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/23/3096001.html 在www.json.org上公布了很多JAVA下的jso ...

随机推荐

  1. php使用位与运算符【&】或【|】实现权限管理

    权限值是这样的2^0=1,相应2进数为”0001″(在这里^我表示成”次方”,即:2的0次方,下同)2^1=2,相应2进数为”0010″2^2=4,相应2进数为”0100″2^3=8,相应2进数为”1 ...

  2. Java递归输出指定路径下所有文件及文件夹

    package a.ab; import java.io.File; import java.io.IOException; public class AE { public static void ...

  3. 快来玩“Gift大转盘”百分百赚好礼

    现在开始到今年的最后一天,你天天都可以来转100%中奖的“ Gift大转盘 ”.代金券.产品折扣.精美纪念礼,没有多余规则.全部网友都可参加,转到就是你赚到,赶快转起来吧! >>活动主页& ...

  4. QT 应用部署到Android的终端步骤

    参考网址: http://blog.csdn.net/syrchina/article/details/17335945

  5. Zynga 开源其服务器性能监控分析工具 zPerfmon

    流年不利的社交游戏服务商Zynga近日在官方博客宣布开源zPerfmon——该工具负责监控Zynga数以千计的社交游戏服务器.zPerfmon的源代码目前已经上传至Github. 包括Facebook ...

  6. JUnit 测试

    Junit 使用 1.忽略测试方法.在使用@Test的方法上使用@Ignore,将不会对此方法进行测试 2.测试套件 解决的问题: 1.对测试类进行统一测试,而不必在单独测试类上一个一个进行测试. 使 ...

  7. Linux驱动学习步骤(转载)

    1. 学会写简单的makefile 2. 编一应用程序,可以用makefile跑起来 3. 学会写驱动的makefile 4. 写一简单char驱动,makefile编译通过,可以insmod, ls ...

  8. Windows下安装Ruby

    Ruby是一门用了就会喜欢的语言,在Ruby的社区里面,只要你觉得用的不习惯,这就是BUG. 下载 登录官方网址, 下载后,直接无脑下一步安装就行. 中间直接勾选add to PATH,可以自动添加到 ...

  9. 隐藏路由器的WIFI信号,防蹭网

    进入路由器的管理界面 最后别忘了 现在信号隐藏了,现在说一下如何用手机连接隐藏的路由器

  10. [数据库]SQL中Group By 的常见使用方法.

    前言今天逛java吧看到了一个面试题, 于是有了今天这个文章, 回顾下Group By的用法.题目如下:Select name from table group by name having coun ...