深入分析JSON编码格式提交表单数据


Posted in Javascript onJune 25, 2015

 以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=="
  }
 ]
}
Javascript 相关文章推荐
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
javascript中Object使用详解
Jan 26 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
基于javascript编写简单日历
May 02 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 #Javascript
jquery使整个div区域可以点击的方法
Jun 24 #Javascript
jQuery寻找n以内完全数的方法
Jun 24 #Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 #Javascript
Javascript常用小技巧汇总
Jun 24 #Javascript
js实现的倒计时按钮实例
Jun 24 #Javascript
js实现大转盘抽奖游戏实例
Jun 24 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
python中函数总结之装饰器闭包详解
2016/06/12 Python
python3安装speech语音模块的方法
2018/12/24 Python
python socket 聊天室实例代码详解
2019/11/14 Python
python对Excel的读取的示例代码
2020/02/14 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
食品安全责任书
2014/04/15 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
工资收入证明
2014/10/07 职场文书
服务员岗位职责
2015/02/03 职场文书
Nginx反向代理、重定向
2022/04/13 Servers