发送时 ajax POST FormData 对象键和值未按设置

Question

我正在以编程方式设置 FormData，如下所示：

    const formData = new FormData();
    formData.append('id', '12345678');

之后，我将使用此对象发送 POST 请求。（使用 angular HttpClient）。

我正在使用 Postman 调试请求并通过将请求导入为 cURL 查看发送了哪些值，我发现 formData 值显示不同。

key:------WebKitFormBoundaryI1mdsdmKkradYVMS\r\nContent-Disposition: form-data; name

value: "id"\r\n\r\n12345678\r\n------WebKitFormBoundaryI1mdsdmKkradYVMS--\r\n

我做错了什么？

我想发送数据，以便服务器将收到带有以下对象的 x-form-urlencoded 请求：

key: id
value: 12345678

编辑：解决方案是这样的：

 const body = new URLSearchParams({id: "12345678"});

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/x-www-form-urlencoded',
      })
    };
    return this.http.post(url, body.toString(), httpOptions).pipe(mergeMap( (response:any) => {
      console.log('response ', response);
      return of (response);
    }));

谢谢，亚龙

Answer 1

FormData 个对象默认生成 multipart/form-data，而不是 application/x-www-form-urlencoded。

它们是为处理 application/x-www-form-urlencoded 中没有标准编码方法的文件上传而设计的。

如果要生成 application/x-www-form-urlencoded 数据，请使用 URLSearchParams object。

const formData = new FormData();
formData.append('id', '12345678');
const query = new URLSearchParams(formData);
console.log(query.toString());

Answer 2

@Quentin 的回答都很好，但不适合 Angular。

只需将第二个参数传递给您的 GET 调用即可：

return this.http.get<any>('url', { params: { id: '123456789' }});

添加url参数不需要post请求，不提供正文也不需要post请求。

发送时 ajax POST FormData 对象键和值未按设置

When sending ajax POST FormData object key and value are not as set

javascript

ajax

form-data

angular