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 ...
随机推荐
- 让谷歌浏览器 chrome 支持小于12px的字体
webkit的私有属性:{-webkit-text-size-adjust:none;} 但是,在最新版的谷歌里.已经不在支持这个属性啦. 用css3的transform:scale()缩放大小,但是 ...
- 直接请求URL调用 axis webservices
假设 http://127.0.0.1/services/Services?wsdl 有名称为 login 方法,且参数为 name , pwd 则,URL请求如下 http://127.0.0.1/ ...
- Delete characters
Description In this exercise, you will get two strings A and B in each test group and the length of ...
- Dynamic CRM 2013学习笔记(十四)复制/克隆记录
经常有这样的需求,一个单据上有太多要填写的内容,有时还关联多个子单据,客户不想一个一个地填写,他们想从已有的单据上复制数据,克隆成一条新的记录.本文将介绍如何克隆一条记录,包括它的子单据以生成一条新的 ...
- 开发笔记:用不用UnitOfWork以及Repository返回什么集合类型
这2天实际开发中明确的东西,在这篇博文中记录一下. 之前对是否需要自己封装UnitOfWork有些犹豫,因为Entity Framework就是一个UnitOfWork实现, 自己再封装一下显得有些多 ...
- Java正则表达式的应用
在很多种情况下,我们都必须对字符串进行匹配,以便判断字符串的格式是否符合要求,对字符串中的内容进行提取.比如,我要从一段话aabdfe中,判断这段话是否有包含ab这个词,那么如果用if-else来判断 ...
- 每周一道数据结构(四)A*算法&博弈树α-β剪枝
A*算法/博弈树 前阵子考试学了A*算法.博弈树和回溯,自己真是愚蠢至极,根本没就搞明白这些,所以对于这些算法问道的话就不能说清楚,也记不住,所以才有了这篇笔记.在这里感谢面试我的那位工程师~~ A* ...
- phoneGap2.9+eclipse开发环境和helloword案例
不同机器安装和使用各不相同,这里也只是记录一下自己机器上面的使用过程. android安装环境前面的文章有些,这里不再说,直接上phoneGap的过程.因为phoneGap2.9.1需要安装nodej ...
- [读书笔记]C#学习笔记三: C#类型详解..
前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...
- atitit.常用编程语言的性能比较 c c++ java
atitit.常用编程语言的性能比较 c c++ java 选择一个什么样的程序问题进行这样的测试呢?这是一个很关键的问题,也最容易影响测试的公平性.另外的,对于每种语言,各自的优势都是不同的 #-- ...