JSON编码格式提交表单数据详解 [复制链接]

高级会员 欲望养恶鬼 2016-9-25 14:39:23 发表在 站长技术经验交流 查看全部 使用道具 举报 回复

版权信息:站内会员分享作品,仅供学习与参考,版权为原作者所有。
  以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

全部评论/1078 条

只有登录之后才可以评论,请点击这里进行登录

暮夏-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 5#

围观 围观 沙发在哪里!!! 回复

陌然浅笑 2016-10-4 22:29:12 6#

我也是坐沙发的 回复

何以相忘 2016-10-6 18:45:51 7#

回帖是种美德. 回复

欲望养恶鬼 2016-10-7 19:30:03 8#

纯粹路过,没任何兴趣,仅仅是看在老用户份上回复一下 回复

簡簡單單ヾ 2016-10-10 22:44:37 9#

边撸边过 回复

Crazy゜ 2016-10-18 22:19:51 10#

广告位,,坐下看看 回复

0关注

1粉丝

7帖子

发布作品
加入收藏 我要分享

分享到微信

打开微信扫一扫即可将网页分享至微信

分享到论坛或者博客

复制
作者的其他作品查看全部
快速回复 返回顶部 返回列表