深入分析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 Ajax异步处理Json数据详解
Nov 05 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
小程序实现授权登陆的解决方案
Dec 02 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
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
Redis构建分布式锁
2017/03/28 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
django反向解析和正向解析的方式
2018/06/05 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
使用python模拟命令行终端的示例
2019/08/13 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
用python写测试数据文件过程解析
2019/09/25 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
研究生毕业鉴定
2014/01/29 职场文书
工程采购员岗位职责
2014/03/09 职场文书
合伙经营协议书范本
2014/04/18 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
教师个人年终总结
2015/02/11 职场文书
贷款工资证明范本
2015/06/12 职场文书
舞出我人生观后感
2015/06/16 职场文书
公司车队管理制度
2015/08/04 职场文书