JSON编码格式提交表单数据详解

[复制链接]
欲望养恶鬼 发表于 2016-9-25 14:39:23
391 803
  以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 基本用法

  1. <form enctype=&#39;application/json&#39;>
  2.   <input name=&#39;name&#39; value=&#39;Bender&#39;>
  3.   <select name=&#39;hind&#39;>
  4.     <option selected>Bitable</option>
  5.     <option>Kickable</option>
  6.   </select>
  7.   <input type=&#39;checkbox&#39; name=&#39;shiny&#39; checked>
  8. </form>

  9. // 生成的Json数据是
  10. {
  11.   "name":   "Bender"
  12. , "hind":   "Bitable"
  13. , "shiny":  true
  14. }
复制代码
          例2 当表单存在多个重名的表单域时,按JSON数组编码

  1. <form enctype=&#39;application/json&#39;>
  2.   <input type=&#39;number&#39; name=&#39;bottle-on-wall&#39; value=&#39;1&#39;>
  3.   <input type=&#39;number&#39; name=&#39;bottle-on-wall&#39; value=&#39;2&#39;>
  4.   <input type=&#39;number&#39; name=&#39;bottle-on-wall&#39; value=&#39;3&#39;>
  5. </form>

  6. // 生成的Json数据是
  7. {
  8.   "bottle-on-wall":   [1, 2, 3]
  9. }
复制代码
          例3 表单域名称以数组形成出现的复杂结构

  1. <form enctype=&#39;application/json&#39;>
  2.   <input name=&#39;pet[species]&#39; value=&#39;Dahut&#39;>
  3.   <input name=&#39;pet[name]&#39; value=&#39;Hypatia&#39;>
  4.   <input name=&#39;kids[1]&#39; value=&#39;Thelma&#39;>
  5.   <input name=&#39;kids[0]&#39; value=&#39;Ashley&#39;>
  6. </form>

  7. // 生成的Json数据是
  8. {
  9.     "pet":  {
  10.         "species":  "Dahut"
  11.     ,   "name":     "Hypatia"
  12.     }
  13. ,   "kids":   ["Ashley", "Thelma"]
  14. }
复制代码
          例4 在上面的例子中,缺失的数组序号值将以null替代

  1. <form enctype=&#39;application/json&#39;>
  2.   <input name=&#39;hearbeat[0]&#39; value=&#39;thunk&#39;>
  3.   <input name=&#39;hearbeat[2]&#39; value=&#39;thunk&#39;>
  4. </form>

  5. // 生成的Json数据是
  6. {
  7.     "hearbeat":   ["thunk", null, "thunk"]
  8. }
复制代码
          例5 多重数组嵌套格式,嵌套层数无限制

  1. <form enctype=&#39;application/json&#39;>
  2.   <input name=&#39;pet[0][species]&#39; value=&#39;Dahut&#39;>
  3.   <input name=&#39;pet[0][name]&#39; value=&#39;Hypatia&#39;>
  4.   <input name=&#39;pet[1][species]&#39; value=&#39;Felis Stultus&#39;>
  5.   <input name=&#39;pet[1][name]&#39; value=&#39;Billie&#39;>
  6. </form>

  7. // 生成的Json数据是
  8. {
  9.     "pet":  [
  10.         {
  11.             "species":  "Dahut"
  12.         ,   "name":     "Hypatia"
  13.         }
  14.     ,   {
  15.             "species":  "Felis Stultus"
  16.         ,   "name":     "Billie"
  17.         }
  18.     ]
  19. }
复制代码
          例6 真的,没有数组维度限制!

  1. <form enctype=&#39;application/json&#39;>
  2.   <input name=&#39;wow[such][deep][3][much][power][!]&#39; value=&#39;Amaze&#39;>
  3. </form>

  4. // 生成的Json数据是
  5. {
  6.     "wow":  {
  7.         "such": {
  8.             "deep": [
  9.                 null
  10.             ,   null
  11.             ,   null
  12.             ,   {
  13.                     "much": {
  14.                         "power": {
  15.                             "!":  "Amaze"
  16.                         }
  17.                     }
  18.                 }
  19.             ]
  20.         }
  21.     }
  22. }
复制代码
          例7 文件上传

  1. <form enctype=&#39;application/json&#39;>
  2.   <input type=&#39;file&#39; name=&#39;file&#39; multiple>
  3. </form>

  4. // 假设你上传了2个文件, 生成的Json数据是:
  5. {
  6.     "file": [
  7.         {
  8.             "type": "text/plain",
  9.             "name": "dahut.txt",
  10.             "body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="
  11.         },
  12.         {
  13.             "type": "text/plain",
  14.             "name": "litany.txt",
  15.             "body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="
  16.         }
  17.     ]
  18. }
复制代码
A19游戏开源社区:www.admin19.com

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
暮夏-Gentle° 发表于 2016-9-26 16:51:31
不错,支持下
一场梦来终是空 发表于 2016-9-30 18:55:29
支持,赞一个
琴已毁メ弦已断 发表于 2016-10-2 09:44:24
占位编辑
旧街旧巷等旧人 发表于 2016-10-4 13:02:36
围观 围观 沙发在哪里!!!
陌然浅笑 发表于 2016-10-4 22:29:12
我也是坐沙发的
何以相忘 发表于 2016-10-6 18:45:51
回帖是种美德.
 楼主| 欲望养恶鬼 发表于 2016-10-7 19:30:03
纯粹路过,没任何兴趣,仅仅是看在老用户份上回复一下
簡簡單單ヾ 发表于 2016-10-10 22:44:37
边撸边过
Crazy゜ 发表于 2016-10-18 22:19:51
广告位,,坐下看看
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

×「 汇享网 」发帖友情提示:
本站禁止发布带有网投链接,网投群号,网投截图,黄色信息、血腥图片、转发垃圾信息等恶意信息内容贴

推荐阅读

平台简介

汇享云网(MyHxzy.com),是一家 Discuz! 商业插件、风格模版、网站源码、 Discuz! 运营维护技术等于一体的交流分享网站,全站88%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---汇享云(如果我们有侵犯了您权益的资源请联系我们删除)

本站版权归属:深圳市汇享网络科技有限公司 ( 闽ICP备15015629号 )
返回顶部 返回列表