提交POST请求的四种方法

12Content-Type: application/x-www-form-urlencoded;charset=utf-8name=tony&age=18

这个提价方式，参数会以键值对的方式进行传输：key=value&key=value，另外，提交的数据的key和value都进行了url转码。大部分服务端语言都对这种方式有很好的支持。

那在angular中如何将表单的提交方式转换到这种提交呢？毕竟我们使用的HttpClient是用的fetch提交，而不是原生表单的提交方式。

首先，我们需要将post请求方的header报文里面的Content-Type字段设置为application/x-www-form-urlencoded：

1234567891011121314151617constructor( private http: HttpClient,) { }ngOnInit(): void { const params = { name: 1,};this.http.post('http//www.baidu.com', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }}).subscribe(res => { console.log('res', res);});}

在浏览器开发工具的NetWork里面查看的时候，会发现这个请求的Content-Type已经变成了application/x-www-form-urlencoded，参数那一块内容也变成了form-data。但是，你在服务器里面处理这个请求的时候，没法子接收到参数值的。为什么？因为虽然我们把请求方式变了，但是参数还是json。这里需要对参数也处理一下：

1234567891011121314const params = {name: 'tony', age: 18};const bodies = [];for (const key of Object.keys(params)) { if (params[key] !== null) { bodies.push(key + '=' + encodeURIComponent(params[key])); }}this.http.post('http//www.baidu.com', bodies.join('&'), { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }}).subscribe(res => { console.log('res', res);});

这样，服务器里面可以接收到参数name=tony&age=18，然后就可以正常解析了。

但是，这样处理是很不方便的，在一个大应用里面，总不能每个请求都这样设置。建议写一个公共方法去处理参数格式化，然后在拦截器里面去处理header，这样可以方便的扩展：

1234567intercept(req: HttpRequest, next: HttpHandler): Observable> { const authReq = req.clone({ headers: req.headers.set('Content-Type', 'application/x-www-form-urlencoded'), }); } return next.handle(authReq);}

multipart/form-data当使用表单上传文件时，必须让

12345678910111213POST http://www.example.com HTTP/1.1Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA------WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name="text"title------WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name="file"; filename="chrome.png"Content-Type: image/pngPNG ... content of chrome.png ...------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

首先生成了一个个boundary(边界)用于分割不同的字段，为了避免与正文内容重复，boundary很长很复杂。然后Content-Type指明了数据是以multipart-data来编码，本次请求的boundary内容是什么。

这种方式一般用来上传文件。

enctype还支持text/plain，但用的非常少。

text/xmlxml的方式传递参数，太麻烦了，不常用，还是用json吧。哈哈哈哈。。。。😄

其实是最近在开发angular项目的时候，忽然遇到了使用form-data方式提交表单的问题，本来摸索摸索可以提交了，但是当我提交一个比较复杂的字符串的时候服务器老是接收不到，后面才发现是没有进行url编码，所以后端直接爆炸了。也是很囧，正好借助这个机会来梳理一下，同时也是个记录。

参考文章：https://imququ.com/post/four-ways-to-post-data-in-http.html