举例详解HTML5中使用JSON格式提交表单

前端技术 2023/09/06 HTML

以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 基本用法

XML/HTML Code复制内容到剪贴板
  1. <form enctype=\'application/json\'>  
  2.   <input name=\'name\' value=\'Bender\'>  
  3.   <select name=\'hind\'>  
  4.     <option selected>Bitable</option>  
  5.     <option>Kickable</option>  
  6.   </select>  
  7.   <input type=\'checkbox\' name=\'shiny\' checked>  
  8. </form>  
  9.     
  10. // 生成的Json数据是   
  11. {   
  12.   \"name\":   \"Bender\"   
  13. , \"hind\":   \"Bitable\"   
  14. , \"shiny\":  true   
  15. }  

例2 当表单存在多个重名的表单域时，按JSON数组编码

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype=\'application/json\'>  
  2.       <input type=\'number\' name=\'bottle-on-wall\' value=\'1\'>  
  3.       <input type=\'number\' name=\'bottle-on-wall\' value=\'2\'>  
  4.       <input type=\'number\' name=\'bottle-on-wall\' value=\'3\'>  
  5.     </form>  
  6.         
  7.     // 生成的Json数据是   
  8.     {   
  9.       \"bottle-on-wall\":   [1, 2, 3]   
  10.     }  

例3 表单域名称以数组形成出现的复杂结构

XML/HTML Code复制内容到剪贴板
  1. <form enctype=\'application/json\'>  
  2.   <input name=\'pet[species]\' value=\'Dahut\'>  
  3.   <input name=\'pet[name]\' value=\'Hypatia\'>  
  4.   <input name=\'kids[1]\' value=\'Thelma\'>  
  5.   <input name=\'kids[0]\' value=\'Ashley\'>  
  6. </form>  
  7.     
  8. // 生成的Json数据是   
  9. {   
  10.     \"pet\":  {   
  11.         \"species\":  \"Dahut\"   
  12.     ,   \"name\":     \"Hypatia\"   
  13.     }   
  14. ,   \"kids\":   [\"Ashley\", \"Thelma\"]   
  15. }  

例4 在上面的例子中，缺失的数组序号值将以null替代

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype=\'application/json\'>  
  2.       <input name=\'hearbeat[0]\' value=\'thunk\'>  
  3.       <input name=\'hearbeat[2]\' value=\'thunk\'>  
  4.     </form>  
  5.         
  6.     // 生成的Json数据是   
  7.     {   
  8.         \"hearbeat\":   [\"thunk\", null, \"thunk\"]   
  9.     }  

例5 多重数组嵌套格式，嵌套层数无限制

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype=\'application/json\'>  
  2.       <input name=\'pet[0][species]\' value=\'Dahut\'>  
  3.       <input name=\'pet[0][name]\' value=\'Hypatia\'>  
  4.       <input name=\'pet[1][species]\' value=\'Felis Stultus\'>  
  5.       <input name=\'pet[1][name]\' value=\'Billie\'>  
  6.     </form>  
  7.         
  8.     // 生成的Json数据是   
  9.     {   
  10.         \"pet\":  [   
  11.             {   
  12.                 \"species\":  \"Dahut\"   
  13.             ,   \"name\":     \"Hypatia\"   
  14.             }   
  15.         ,   {   
  16.                 \"species\":  \"Felis Stultus\"   
  17.             ,   \"name\":     \"Billie\"   
  18.             }   
  19.         ]   
  20.     }  

例6 真的，没有数组维度限制！

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype=\'application/json\'>  
  2.       <input name=\'wow[such][deep][3][much][power][!]\' value=\'Amaze\'>  
  3.     </form>  
  4.         
  5.     // 生成的Json数据是   
  6.     {   
  7.         \"wow\":  {   
  8.             \"such\": {   
  9.                 \"deep\": [   
  10.                     null   
  11.                 ,   null   
  12.                 ,   null   
  13.                 ,   {   
  14.                         \"much\": {   
  15.                             \"power\": {   
  16.                                 \"!\":  \"Amaze\"   
  17.                             }   
  18.                         }   
  19.                     }   
  20.                 ]   
  21.             }   
  22.         }   
  23.     }  

例7 文件上传

   

XML/HTML Code复制内容到剪贴板
  1. <form enctype=\'application/json\'>  
  2.      <input type=\'file\' name=\'file\' multiple>  
  3.    </form>  
  4.        
  5.    // 假设你上传了2个文件, 生成的Json数据是:   
  6.    {   
  7.        \"file\": [   
  8.            {   
  9.                \"type\": \"text/plain\",   
  10.                \"name\": \"dahut.txt\",   
  11.                \"body\": \"REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo=\"   
  12.            },   
  13.            {   
  14.                \"type\": \"text/plain\",   
  15.                \"name\": \"litany.txt\",   
  16.                \"body\": \"SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg==\"   
  17.            }   
  18.        ]   
  19.    }   

本文地址：https://www.stayed.cn/item/17397

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案