2018-10-12

产投集团APP-智慧党建系统
1、会议创建会议数据提交业务对接

学习
1、JS变量作用域提升
2、HTTP协议之Content-type
经常使用的Content-type有三种：application/x-www-form-urlencoded | application/json | multipart/form-data

是因为我不止一次遇到一个问题：前端传了参数(浏览器里面可以看见是传了的)，但是后端没有接收到。一开始我用axios和写go的后端遇到过，后来我用vue-resource和写java的后端又遇到了。奇怪的是我用原生的ajax来请求又没了问题。后来在使用postman来测试的时候，发现好像他们的Content-type有一些区别，大概知道了原因，但是因为懒也没有去深究，但是最近我同事又遇到了，又让我勤快了一些
经常使用的Content-type有三种：application/x-www-form-urlencoded | application/json | multipart/form-data

先通过浏览器来看看他们传输数据时候的样子

application/x-www-form-urlencoded 如图：

image

application/json 如图：

image

比较这两个地方可以发现他们传输数据的方式是不同的。前者是使用 urlencoded 的方式，也就是 'msg=send&id=1'；

后者是使用json格式，直接是json字符串，也就是JSON.stringify({msg: "send json"});

//urlencoded格式

xmlHttp.send(``'msg=send&id=1'``)

//json格式

xmlHttp.send(JSON.stringify({msg: ``"send json"``}));

通过form表单不设置enctype属性提交的时候，默认就是****application/x-www-form-urlencoded** 。**

之所以，浏览器看见前端传了数据后端接受不到；主要原因是前后端没有约定好数据的格式，或者是忽略掉了。我之前遇到的问题出现的原因是：使用的axios和vue-resoure传的是json字符串给后端，但是后端又是用的 urlencoded 格式来接收的。所以出现了使用axios请求不行，但是自己写了个原生的ajax也可以正常访问。

以node为例：

app.use(bodyParser.json()); ``// for parsing application/json

app.use(bodyParser.urlencoded({ extended: ``true })); ``// for parsing application/x-www-form-urlencoded

它针对于web页面上传过来的 不同content-type 的数据都作出了相应的处理，否则是接收不到数据的。（其他语言又不同的处理方式。。。。嗯。。具体怎么我就不太清楚了）

总之，最好事先沟通好这个部分（虽然一般情况都是不会出问题的，因为前端可以通过设置Content-type来调整），这样严谨一些。

最后、multipart/form-data：

用来上传文件，可以将文件以“流”的形式传给后端，后端通过流去接收。

如图：

image