首页 > 其他分享 >Json_JSON编码格式提交表单数据详解

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

时间:2023-06-08 22:35:10浏览次数:42  
标签:10 name Json 表单 JSON 格式



 

以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. <formenctype='application/json'>
2. <inputname='name'value='Bender'>
3. <selectname='hind'>
4. <optionselected>Bitable</option>
5. <option>Kickable</option>
6. </select>
7. <inputtype='checkbox'name='shiny'checked>
8. </form>
9.  
10. // 生成的Json数据是
11. {
12.  "name": "Bender"
13. , "hind": "Bitable"
14. , "shiny": true
15. }

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


1. <formenctype='application/json'>
2. <inputtype='number'name='bottle-on-wall'value='1'>
3. <inputtype='number'name='bottle-on-wall'value='2'>
4. <inputtype='number'name='bottle-on-wall'value='3'>
5. </form>
6.  
7. // 生成的Json数据是
8. {
9.  "bottle-on-wall": [1, 2, 3]
10. }

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


1. <formenctype='application/json'>
2. <inputname='pet[species]'value='Dahut'>
3. <inputname='pet[name]'value='Hypatia'>
4. <inputname='kids[1]'value='Thelma'>
5. <inputname='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替代


1. <formenctype='application/json'>
2. <inputname='hearbeat[0]'value='thunk'>
3. <inputname='hearbeat[2]'value='thunk'>
4. </form>
5.  
6. // 生成的Json数据是
7. {
8.  "hearbeat": ["thunk", null, "thunk"]
9. }

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


1. <formenctype='application/json'>
2. <inputname='pet[0][species]'value='Dahut'>
3. <inputname='pet[0][name]'value='Hypatia'>
4. <inputname='pet[1][species]'value='Felis Stultus'>
5. <inputname='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 真的,没有数组维度限制!


1. <formenctype='application/json'>
2. <inputname='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 文件上传

1. <formenctype='application/json'>
2. <inputtype='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. }

 

标签:10,name,Json,表单,JSON,格式
From: https://blog.51cto.com/u_16070335/6443858

相关文章

  • 实体类中嵌套Enum类型并想转换成JSON字符串时遇到的问题。
    实体类中嵌套Enum类型并想转换成JSON字符串时遇到的问题。先说明问题的产生,在自己写着玩的时候,新建了一个User类如下:packagecom.ma.xdo;importlombok.*;importjava.io.Serializable;/***@ClassNameUser*@DescriptionTODO*@Author@O_o*@Date2023/6/814:......
  • Alibaba FastJSON 反序列化json时字段值未成功赋值
    FastJson是一个将对象序列化为json字符串和将字符串反序列化为对象的一个工具,但是在反序列化解析时,可能会出现字段值丢失的问题,笔者在手撸rpc框架的时候,对于客户端传过来的json字符串总是有一个字段值解析为null,在客户端解析却又是正常的,花费了很多时间去找这个bug,通过解析Jsonpa......
  • Ajax表单提交数据出现乱码和解决办法
    >>更多精彩技术文章>//要传递的参数  varqueryString="firstName="+firstName+"&lastName="+lastName                         +"&birthday="+birthday;   function  1.//GET方式提交2.doRequestUsingGET(......
  • Jmeter 响应结果提取json表达式
    JSONPathexpression:JSON表达式,通过JSON表达式提取数据对响应结果提取json,下拉选择JsonPahtTester.  JSON表达式语法:"$"代表提取根节点的数据$.a代表从根节点开始,寻找根节点的子节点a,并提取a的数据$.a.b代表从根节点开始,寻找根节点的子节点a,然后寻找a的子节点b,并......
  • Java 表单注册常用正则表达式验证工具类
    http://springmvc-springdata.iteye.com/blog/2114555Java表单注册常用正则表达式验证工具类,常用正则表达式大集合。1.电话号码2.邮编3.QQ4.E-mail5.手机号码6.URL7.是否为数字8.是否为中文9.身份证10.域名11.IP。。。。常用验证应有尽有!这的确是您从事web开发......
  • 关于The JSON value could not be converted to System.DateTime的解决方案
    如下json格式提交到后台后报:TheJSONvaluecouldnotbeconvertedtoSystem.DateTime.Path:$.beginTime|LineNumber:3|BytePositionInLine:33.{"beginTime":"2023-06-08T08:00:00"}造成这个错误的原因为程序无法正常解析该json,主要是为了提升执行效率;Sys......
  • JSON与JAVA数据的转换
    JSON与JAVA数据的转换关键字:jsonjavaJSON-lib这个Java类包用于把bean,map和XML转换成JSON并能够把JSON转回成bean和DynaBean。下载地址:http://json-lib.sourceforge.net/还要需要的第3方包:jakartacommons-lang2.3jakartacommons-beanutils1.7.0j......
  • 【C#】JSON转DataTable存入数据库
    由于JSON直接转DataTable可能会存在类型丢失如下:采用读取数据库表字段类型构建DataTable///<summary>///JSON转DataTale存入数据库///</summary>///<paramname="json"></param>publicstaticvoidJsonDataTableTest(stringjson){stringsql=strin......
  • .net core 因路径原因导致的JSON解析错误
    因解析json配置文件导致的错误:JsonReaderException:'0xEF'isaninvalidescapablecharacterwithinaJSONstring.Thestringshouldbecorrectlyescaped.LineNumber如何解决?{  "path":"D:\工作资料\技术资料"}改为{   "path":"D:......
  • nodejs package.json
    package.json是用来识别项目并且处理项目的依赖关系的{"name":"名",//包名字"version":"1.0.0",//版本"description":"描述","main":"index.js",//入口文件"scripts":{//指定运行脚本......