使用从angular到spring的表单数据发布请求

Question

我试图使用angular及其http库向我的SpringRESTAPI发送post请求。

目前在post-man（成功）我发送数据的方式：

1. 格式为表单数据
2. 钥匙是reqData（必填）
3. 该值为json（必需）

如何通过角以相同的方式发送数据？

目前，我的数据是这样的：

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)

因此，我应该发送一个键和值（我不知道typescript中是哪个数据结构，但在java中是多值映射），其中键是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);

Answer 1

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

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

const reqData = 'reqData=' + jsonDataInString;

它发送了一个成功请求。

Answer 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

希望它能解决你的问题。请让我知道如果这解决了你的问题

Answer 3

您可以创建一个方法来发布，如下所示：

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); 
}