如何在角度2的http post请求中发送表单数据?

aki*_*san 9 javascript multipartform-data form-data angular

我试图将更新的用户详细信息的表单数据发送到后端哪个节点服务器角度为2,但是我无法发送表单数据,服务器响应状态为500,在angularjs我做了类似的事情, 服务文件

  update: {
    method: 'POST',
    params: {
      dest1: 'update'
    },
    transformRequest: angular.identity,
    'headers': {
      'Content-Type': undefined
    }
  }
Run Code Online (Sandbox Code Playgroud)

在控制器中

var fd = new FormData();
var user = {
  _id: StorageFactory.getUserDetail()._id,
  loc: locDetails
};
fd.append('user', angular.toJson(user));
UserService.update(fd).
$promise.then(
  function(value) {
    console.info(value);
    updateUserDetailsInStorage();
  },
  function(err) {
    console.error(err);
  }
);
Run Code Online (Sandbox Code Playgroud)

我无法想象如何在角度2中做到这一点,因为angular.toJson,angular.identity和transformrequest功能在角度2中不可用,到目前为止,我已经在角度2中完成了以下操作,

 let fd = new FormData();
 let user = {
   _id: this.appManager.getUserDetail()._id,
   loc: locDetails
 };
 fd.append('user', JSON.stringify(user));
 this.userService.update(fd).subscribe((value) => {
   console.log(value);
   this.updateUserDetailsInStorage();
 }, (err) => {
   console.error(err);
 });
Run Code Online (Sandbox Code Playgroud)

http服务文件

update(body) {
  console.log('update', body);
  const headers = new Headers({
    'Content-Type': undefined
  });

  const options = new RequestOptions({
    headers: headers
  });
  return this.http.post(`${app.DOMAIN}` + 'user/update', body, options)
    .map((res: Response) => {
      res.json();
    }).do(data => {
      console.log('response', data);
    })
}
Run Code Online (Sandbox Code Playgroud)

我已经阅读了很多帖子并尝试了一些东西,但到目前为止它没有成功,有人能建议我怎么做吗?

小智 14

如果您的服务器控制器需要它,您可以添加标题,否则您可以像这样发布它

let body = new FormData();
body.append('email', 'emailId');
body.append('password', 'xyz');
this.http.post(url, body);
Run Code Online (Sandbox Code Playgroud)


小智 6

这是在Angular2中构建POST请求的功能解决方案,您不需要Authorization标头.

var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

let options = new RequestOptions({ headers: headers });

var body = "firstname=" + user.firstname + "&lastname=" + user.lastname + "&username=" + user.username + "&email=" + user.email + "&password=" + user.password;

return new Promise((resolve) => {
                this.http.post("http://XXXXXXXXXXX/users/create", body, options).subscribe((data) => {
                if (data.json()) {
                    resolve(data.json());
                } else {
                    console.log("Error");
                }
            }
        )
    });
Run Code Online (Sandbox Code Playgroud)


Joh*_*ird 0

这是我的应用程序中的方法,效果很好。

 updateProfileInformation(user: User) {
    this.userSettings.firstName = user.firstName;
    this.userSettings.lastName = user.lastName;
    this.userSettings.dob = user.dob;

    var headers = new Headers();
    headers.append('Content-Type', this.constants.jsonContentType);

    var s = localStorage.getItem("accessToken");
    headers.append("Authorization", "Bearer " + s);
    var body = JSON.stringify(this.userSettings);

    return this.http.post(this.constants.userUrl + "UpdateUser", body, { headers: headers })
      .map((response: Response) => {
        var result = response.json();
        return result;
      })
      .catch(this.handleError)
  }
Run Code Online (Sandbox Code Playgroud)

  • 这个答案似乎没有特别解释如何发布表单数据。这看起来像一个带有普通字符串化 JSON 正文的请求。表单数据在哪里? (9认同)