深入分析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插件StickUp实现网页导航置顶
Apr 12 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
python实现ping的方法
2015/07/06 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
什么是索引指示器
2012/08/20 面试题
出纳工作岗位责任制
2014/02/02 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
一年级班主任感言
2014/03/08 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
js Proxy的原理详解
2021/05/25 Javascript
详解Python为什么不用设计模式
2021/06/24 Python
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server