常见的contentType编码类型【转】

转自https://segmentfault.com/a/1190000006871099

contentType是指http/https发送信息至服务器时的内容编码类型contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。内容编码类型的作用,有点像本地文件的后缀名。

常见的contentType

一、x-www-form-urlencoded

这是Jquery/Zepto Ajax默认的提交类型。最简例子为:

 1 let userInfo = {
 2  name: ‘CntChen‘,
 3  info: ‘Front-End‘,
 4 }
 5
 6 $.ajax({
 7   url: ‘https://github.com‘,
 8   type: ‘POST‘,
 9   data: userInfo,
10   success: (data) => {},
11 });

此时默认的提交的contentTypeapplication/x-www-form-urlencoded,此时提交的数据将会格式化成:

 name=CntChen&info=Front-End

HTML的form表单默认的提交编码类型也是x-www-form-urlencoded,可能这就是Jquery/Zepto等类库(其实是Ajax:XMLHttpRequest)也默认使用contentType:x-www-form-urlencoded的原因。如果请求类型typeGET,格式化的字符串将直接拼接在url后发送到服务端;如果请求类型是POST,格式化的字符串将放在http body的Form Data中发送。

二、json

使用json内容编码发送数据,最简例子为:

 1 let userInfo = {
 2  name: ‘CntChen‘,
 3  Info: ‘Front-End‘,
 4 }
 5
 6 $.ajax({
 7   url: ‘https://github.com‘,
 8   contentType: ‘application/json‘,
 9   type: ‘POST‘,
10   data: JSON.stringify(userInfo),
11   success: (data) => {},
12 });

最主要的不同有3点:

  • 需要显式指定contentTypeapplication/json,覆盖默认的contentType
  • 需要使用JSON.stringify序列化需要提交的数据对象,序列化的结果为:
{"name":"CntChen","info":"Front-End"}
  • 提交的类型不能为GET,使用GET的话,数据会在url中发送,此时就无法以json字符串的编码发送

三、multipart/form-data,主要用于传输文件数据的

四、JS对象编码

对于扁平的参数对象,使用x-www-form-urlencodedjson并没有大的差别,后台都可以处理成对象,并且数据编码后的长度差别不大。
但是对于对象中嵌套对象,或对象字段包含数组,此时两种内容编码方式就有较大差别。

普通对象

1 {
2     userInfo :{
3      name: ‘CntChen‘,
4      info: ‘Front-End‘,
5      login: true,
6     },
7 }
  • to x-www-form-urlencoded (1)
userInfo[name]=CntChen&userInfo[info]=Front-End&userInfo[login]=true
  • to json (2)
{"userInfo":{"name":"CntChen","Info":"Front-End","login":true}}

对象字段为数组

 1 {
 2     authors:[
 3       {
 4         name: ‘CntChen‘,
 5         info: ‘Front-End‘,
 6       },
 7       {
 8         name: ‘Eva‘,
 9         info: ‘Banker‘,
10       }
11     ],
12 }
  • to x-www-form-urlencoded (3)
authors[0][name]=CntChen&authors[0][info]=Front-End&authors[1][name]=Eva&authors[1][info]=Banker
  • to json (4)
{"authors":[{"name":"CntChen","info":"Front-End"},{"name":"Eva","info":"Banker"}]}

可见:x-www-form-urlencoded是先将对象铺平,然后使用key=value的方式,用&作为间隔。对于嵌套对象的每个字段,都要传输其前缀,如(1)中的userInfo重复传输了3次;(3)中authors传输了4次。
如果对象是多重嵌套的,或者嵌套对象的字段较多,x-www-form-urlencoded会产生更多冗余信息。同时,x-www-form-urlencoded可读性不如json字符串。

json的优势

1、较小的传输量

从前文可以看出,使用json字符串的形式,可以减少冗余字段的传输,减少请求的数据量。

2、请求与返回统一

目前许多前后端交互的返回数据是json字符串,这可能是考虑较小的传输量而作出的选择。同时,ES3.1添加了JSON对象,许多浏览器可以直接使用JSON对象,可以将json字符串解析为JS对象(JSON.parse),将JS对象编码为json字符串(JSON.stringify);
所以使用json编码请求数据,其编码解码非常方便,并且可以保持与后台返回数据的格式一致。
3、框架的支持

目前Mvvm的前端框架如React,网络请求通常是提交一个JS对象(传输的时候编码为json字符串)。后台服务器如Koa,接收请求和响应的数据是json字符串。

4、可读性高

原文地址:https://www.cnblogs.com/Youngly/p/8696160.html

时间: 2024-11-08 20:35:42

常见的contentType编码类型【转】的相关文章

Ajax方式提交表单的常见编码类型总结

用Ajax方式提交表单,决定编码类型的是请求头中Content-Type,不同的值对应不同的提交和回调处理方式.而且,在项目中我们会用到前端的库或者框架,他们对于不同的Content-Type也有不同的参数写法,本文将以jQuery和AngularJS,加上XMLHttpRequest共三种方式为例,详细介绍不同Content-Type的发送请求的方式.本文考虑的Content-Type类型,共有如下几种: application/x-www-form-urlencoded multipart/

【转载】关于Python脚本开头两行的:#!/usr/bin/python和# -*- coding: utf-8 -*-的作用 – 指定文件编码类型

下面的内容来自:http://www.cnblogs.com/blueskylcc/p/5332642.html, 对方也是转的,不过没有找到转载的出处: 1.#!/usr/bin/python 是用来说明脚本语言是 python 的 是要用 /usr/bin下面的程序(工具)python,这个解释器,来解释 python 脚本,来运行 python 脚本的. 2.# -*- coding: utf-8 -*- 是用来指定文件编码为 utf-8 的 详情可以参考:PEP 0263 - Defin

java获取常见文本文件的编码 解决乱码问题

乱码问题的产生一般是,由字节流转字符流的时候,读文件的编码与文件的系统编码不一致造成的. 解决方式:先自动判断文件系统编码类型,然后读的时候用这个类型去读就ok了. 自动判断文件系统编码类型代码如下, 地址:http://www.cnblogs.com/java0721/archive/2012/07/21/2602963.html java获取常见文本文件的编码 解决乱码问题

Java学习之道:Java中十个常见的违规编码

最近,我给Java项目做了一次代码清理工作.经过清理后,我发现一组常见的违规代码(指不规范的代码并不表示代码错误)重复出现在代码中.因此,我把常见的这些违规编码总结成一份列表,分享给大家以帮助Java爱好者提高代码的质量和可维护性. 这份列表没有依据任何规则或顺序,所有的这些都是通过代码质量工具包括CheckStyle,FindBugs和PMD检查出.一起来看下: 一.Eclipse编译器提供源代码格式输入 Eclipse提供自动源码格式选项,并且组织输入(删除未使用的代码).你可以使用下面的这

JS之表单提交时编码类型enctype详解

简介 form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded. 当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串append到url后面,用?分割,加载这个新的url. 当act

表单提交时编码类型enctype详解

很早以前,当还没有前端这个概念的时候,我在写表单提交完全不去理会表单数据的编码,在action属性里写好目标URL,剩下的啊交给浏览器吧~但是现在,更多时候我们都采用Ajax方式提交数据,这种原始的方式仅仅被当成优雅降级的产物. 当我们用异步方式提交表单,就需要稍微关注一下表单数据的编码问题了.回想一下,在写回调函数时是不是有根据过请求的Content-Type写不同业务逻辑的经历,那这个Content-Type和表单的编码有什么联系吗?有没有在明明前端已经发数据给后端了,后端的小伙伴死活取不到

Java中十个常见的违规编码

摘要:作者Veera Sundar在清理代码工作时发现一些常见的违规编码,因此,Veera Sundar把针对常见的一些违规编码总结成一份列表,以便帮助Java爱好者提高代码的质量和可维护性. 最近,我给Java项目做了一次代码清理工作.经过清理后,我发现一组常见的违规代码(指不规范的代码并不表示代码错误)重复出现在代码中.因此,我把常见的这些违规编码总结成一份列表,分享给大家以帮助Java爱好者提高代码的质量和可维护性. 这份列表没有依据任何规则或顺序,所有的这些都是通过代码质量工具包括Che

常见的DP优化类型

常见的DP优化类型 1单调队列直接优化 如果a[i]单调增的话,显然可以用减单调队列直接存f[j]进行优化. 2斜率不等式 即实现转移方程中的i,j分离.b单调减,a单调增(可选). 令: 在队首,如果g[j,k]>=-a[i],那么j优于k,而且以后j也优于k,因此k可以重队列中直接删去.在队尾,如果x<y<z,且g[x,y]<=g[y,z],也就是说只要y优于x一定可以得出z优于y的,我们就删去y. 经过队尾的筛选,我们在队列中得到的是一个斜率递减的下凸包,每次寻找从上往下被-

几种常见的虚拟镜像类型

.vdi :virtualbox默认的虚拟硬盘文件格式 .vdmk:vmware默认的虚拟硬盘文件格式 .vhd:微软virtualPC默认的虚拟硬盘文件格式 .hdd:parallel desktop默认的虚拟硬盘文件格式 几种常见的虚拟镜像类型