使用从角度到弹簧的表单数据发布请求答案

【问题标题】：post request with form-data from angular to spring使用从角度到弹簧的表单数据发布请求
【发布时间】：2019-04-26 13:29:40
【问题描述】：

我正在尝试使用 Angular 及其 http 库向我的 spring rest api 发送一个发布请求。

目前在邮递员（成功）我正在以这种方式发送数据：

格式为form-data
关键是reqData(强制)
值为 json（必填）

如何通过 angular 以同样的方式发送数据？

目前，我的数据如下所示：

onSignIn(form: NgForm) {
    const email = form.value.email;
    const password = form.value.password;

    const reqData = {
      'app_uname': email,
      'app_pass': password
    };
}

添加更多关于我的后端代码：

我的 rest api 是这样的：

@RequestMapping(value = "/login", method = RequestMethod.POST)

@ResponseBody
public ResponseEntity<String> handle(@RequestParam(value = "reqData") String reqData,HttpServletRequest request)

所以我应该发送一个键和值（我不知道打字稿中的哪个数据结构，但在 java 中它是 MultiValueMap），其中键是 reqData，值应该是字符串或 json 对象中的 json。

如何将我的 reqData json 转换为 MultiValueMap 格式？

我也尝试过 formData 和 Map：

const formData: FormData = new FormData();
    formData.append('reqData', JSON.stringify(reqData));

const map = new Map();
    map.set('reqData', reqData);

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/FormData

标签： angular spring spring-mvc angular7 angular-http

【解决方案1】：

您可以创建一个发布方法如下：

var model = {email: youremail, password: yourpassword};
post(url: string, model: any): Observable <any> {
    let formData: FormData = new FormData(); 
    formData.append('app_uname', model.email); 
    formData.append('app_pass', model.password); 
    return this._http.post(url, formData)
        .map((response: Response) => {
            return response;
        }).catch(this.handleError); 
}

【讨论】：

请尝试看看我想要什么样的数据，key应该是reqData，value应该是json。
无论你想用 json 对象发送什么键，然后尝试通过 json.stringify() 进行转换

【解决方案2】：

要使用 formdata 向服务器发送数据，可以这样做

const email = form.value.email;
const password = form.value.password;

const formData: FormData = new FormData();
formData.append("email ", email);
formData.append("password ", password);

// then http post to server

编辑

如果你想以 json 格式提交数据，你需要这样做

const email = form.value.email;
const password = form.value.password;

const reqData = {
  'app_uname': email,
  'app_pass': password
};

const formData: FormData = new FormData();
formData.append("reqData", JSON.stringify(reqData));

// then http post to server and in the server you need to parse the json string

希望它能解决您的问题。如果这能解决您的问题，请告诉我

【讨论】：

键应该是reqData，值应该是电子邮件和密码的JSON。你的回答没有帮助。
请求负载为空。表示数据为空。

【解决方案3】：

这就是我向后端发送请求所做的。

我创建了所需的json，然后我创建了一个请求参数字符串

const reqData = 'reqData=' + jsonDataInString;

发送成功请求。

【讨论】：