JSON编码格式提交表单数据详解
以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 基本用法
- <form enctype='application/json'>
- <input name='name' value='Bender'>
- <select name='hind'>
- <option selected>Bitable</option>
- <option>Kickable</option>
- </select>
- <input type='checkbox' name='shiny' checked>
- </form>
- // 生成的Json数据是
- {
- "name": "Bender"
- , "hind": "Bitable"
- , "shiny": true
- }
例2 当表单存在多个重名的表单域时,按JSON数组编码
- <form enctype='application/json'>
- <input type='number' name='bottle-on-wall' value='1'>
- <input type='number' name='bottle-on-wall' value='2'>
- <input type='number' name='bottle-on-wall' value='3'>
- </form>
- // 生成的Json数据是
- {
- "bottle-on-wall": [1, 2, 3]
- }
例3 表单域名称以数组形成出现的复杂结构
- <form enctype='application/json'>
- <input name='pet[species]' value='Dahut'>
- <input name='pet[name]' value='Hypatia'>
- <input name='kids[1]' value='Thelma'>
- <input name='kids[0]' value='Ashley'>
- </form>
- // 生成的Json数据是
- {
- "pet": {
- "species": "Dahut"
- , "name": "Hypatia"
- }
- , "kids": ["Ashley", "Thelma"]
- }
例4 在上面的例子中,缺失的数组序号值将以null替代
- <form enctype='application/json'>
- <input name='hearbeat[0]' value='thunk'>
- <input name='hearbeat[2]' value='thunk'>
- </form>
- // 生成的Json数据是
- {
- "hearbeat": ["thunk", null, "thunk"]
- }
例5 多重数组嵌套格式,嵌套层数无限制
- <form enctype='application/json'>
- <input name='pet[0][species]' value='Dahut'>
- <input name='pet[0][name]' value='Hypatia'>
- <input name='pet[1][species]' value='Felis Stultus'>
- <input name='pet[1][name]' value='Billie'>
- </form>
- // 生成的Json数据是
- {
- "pet": [
- {
- "species": "Dahut"
- , "name": "Hypatia"
- }
- , {
- "species": "Felis Stultus"
- , "name": "Billie"
- }
- ]
- }
例6 真的,没有数组维度限制!
- <form enctype='application/json'>
- <input name='wow[such][deep][3][much][power][!]' value='Amaze'>
- </form>
- // 生成的Json数据是
- {
- "wow": {
- "such": {
- "deep": [
- null
- , null
- , null
- , {
- "much": {
- "power": {
- "!": "Amaze"
- }
- }
- }
- ]
- }
- }
- }
例7 文件上传
- <form enctype='application/json'>
- <input type='file' name='file' multiple>
- </form>
- // 假设你上传了2个文件, 生成的Json数据是:
- {
- "file": [
- {
- "type": "text/plain",
- "name": "dahut.txt",
- "body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="
- },
- {
- "type": "text/plain",
- "name": "litany.txt",
- "body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="
- }
- ]
- }
JSON编码格式提交表单数据详解的更多相关文章
- tomcat中间件提交表单数据量过大警告处理方案
http://www.bubuko.com/infodetail-976418.html http://www.cnblogs.com/yg_zhang/p/4248061.html tomcat中间 ...
- Spring Boot(三):RestTemplate提交表单数据的三种方法
http://blog.csdn.net/yiifaa/article/details/77939282 ********************************************** ...
- jsp提交表单数据乱码,内置对象,以及过滤器
jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getPara ...
- ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题
今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...
- easyui提交表单数据的时候如何防止二次提交
在前端提交数据的时候有时候可能会由于网络延迟等原因,我们在等待的时候会多次点击保存按钮,这可能会导致我们一次输入的数据多次提交,导致数据重复.最近在做项目的时候碰到了这个问题,先说一点,这个问题的解决 ...
- Java构造和解析Json数据的两种方法详解二
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...
- Skip List(跳跃表)原理详解与实现【转】
转自:http://dsqiu.iteye.com/blog/1705530 Skip List(跳跃表)原理详解与实现 本文内容框架: §1 Skip List 介绍 §2 Skip List 定义 ...
- Java构造和解析Json数据的两种方法详解二——org.json
转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...
- Java构造和解析Json数据的两种方法详解一——json-lib
转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/23/3096001.html 在www.json.org上公布了很多JAVA下的jso ...
随机推荐
- php使用位与运算符【&】或【|】实现权限管理
权限值是这样的2^0=1,相应2进数为”0001″(在这里^我表示成”次方”,即:2的0次方,下同)2^1=2,相应2进数为”0010″2^2=4,相应2进数为”0100″2^3=8,相应2进数为”1 ...
- Java递归输出指定路径下所有文件及文件夹
package a.ab; import java.io.File; import java.io.IOException; public class AE { public static void ...
- 快来玩“Gift大转盘”百分百赚好礼
现在开始到今年的最后一天,你天天都可以来转100%中奖的“ Gift大转盘 ”.代金券.产品折扣.精美纪念礼,没有多余规则.全部网友都可参加,转到就是你赚到,赶快转起来吧! >>活动主页& ...
- QT 应用部署到Android的终端步骤
参考网址: http://blog.csdn.net/syrchina/article/details/17335945
- Zynga 开源其服务器性能监控分析工具 zPerfmon
流年不利的社交游戏服务商Zynga近日在官方博客宣布开源zPerfmon——该工具负责监控Zynga数以千计的社交游戏服务器.zPerfmon的源代码目前已经上传至Github. 包括Facebook ...
- JUnit 测试
Junit 使用 1.忽略测试方法.在使用@Test的方法上使用@Ignore,将不会对此方法进行测试 2.测试套件 解决的问题: 1.对测试类进行统一测试,而不必在单独测试类上一个一个进行测试. 使 ...
- Linux驱动学习步骤(转载)
1. 学会写简单的makefile 2. 编一应用程序,可以用makefile跑起来 3. 学会写驱动的makefile 4. 写一简单char驱动,makefile编译通过,可以insmod, ls ...
- Windows下安装Ruby
Ruby是一门用了就会喜欢的语言,在Ruby的社区里面,只要你觉得用的不习惯,这就是BUG. 下载 登录官方网址, 下载后,直接无脑下一步安装就行. 中间直接勾选add to PATH,可以自动添加到 ...
- 隐藏路由器的WIFI信号,防蹭网
进入路由器的管理界面 最后别忘了 现在信号隐藏了,现在说一下如何用手机连接隐藏的路由器
- [数据库]SQL中Group By 的常见使用方法.
前言今天逛java吧看到了一个面试题, 于是有了今天这个文章, 回顾下Group By的用法.题目如下:Select name from table group by name having coun ...