Angular2 - Http POST请求参数

Question

我正在尝试发出POST请求,但我无法让它工作:

testRequest() {
      var body = 'username=myusername?password=mypassword';
      var headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');

      this.http
        .post('/api',
          body, {
            headers: headers
          })
          .subscribe(data => {
                alert('ok');
          }, error => {
              console.log(JSON.stringify(error.json()));
          });
}

我基本上想要复制这个http请求(不是ajax),就像它是由html表单生成的:

网址:/ api

参数:用户名和密码

Answer 1

更新为Angualar 4.3+

现在我们可以用HttpClient而不是Http

指南就在这里

示例代码

const myheader = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
let body = new HttpParams();
body = body.set('username', USERNAME);
body = body.set('password', PASSWORD);
http
  .post('/api', body, {
    headers: myheader),
  })
  .subscribe();

弃用

或者你可以这样做:

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
let body = urlSearchParams.toString()

2017年10月更新

从angular4 +,我们不需要headers或者.toString()东西.相反,你可以像下面的例子那样做

import { URLSearchParams } from '@angular/http';

POST/PUT方法

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
this.http.post('/api', urlSearchParams).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

GET/DELETE方法

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', username);
    urlSearchParams.append('password', password);
    this.http.get('/api', { search: urlSearchParams }).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

对于JSON application/json内容类型

this.http.post('/api',
      JSON.stringify({
        username: username,
        password: password,
      })).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
      )

Answer 2

我认为application/x-www-form-urlencoded内容类型的正文不正确.您可以尝试使用此:

var body = 'username=myusername&password=mypassword';

希望它对你有帮助,蒂埃里

Answer 3

在Angular2的更高版本中,Content-Type如果传递正确类型的对象,则无需手动设置标题和编码正文body.

你只需要这样做

import { URLSearchParams } from "@angular/http"


testRequest() {
  let data = new URLSearchParams();
  data.append('username', username);
  data.append('password', password);

  this.http
    .post('/api', data)
      .subscribe(data => {
            alert('ok');
      }, error => {
          console.log(error.json());
      });
}

这样,角度将为您编码身体,并将设置正确的Content-Type标头.

PS不要忘了导入URLSearchParams从@angular/http否则将无法正常工作.

Answer 4

所以只是为了得到一个完整的答案:

login(username, password) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        let urlSearchParams = new URLSearchParams();
        urlSearchParams.append('username', username);
        urlSearchParams.append('password', password);
        let body = urlSearchParams.toString()
        return this.http.post('http://localHost:3000/users/login', body, {headers:headers})
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                console.log(response);
                var body = response.json();
                console.log(body);
                if (body.response){
                    let user = response.json();
                    if (user && user.token) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('currentUser', JSON.stringify(user)); 
                    }
                }
                else{
                    return body;
                }
            });
    }

Answer 5

如果有人在使用Angular 版本 4+（我的是 4.3.6）。这是对我有用的示例代码。

首先添加所需的导入

import { Http, Headers, Response, URLSearchParams } from '@angular/http';

然后是api函数。这是一个登录示例，可以根据您的需要进行更改。

login(username: string, password: string) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', username);
    urlSearchParams.append('password', password);
    let body = urlSearchParams.toString()

    return this.http.post('http://localhost:3000/api/v1/login', body, {headers: headers})
        .map((response: Response) => {
            // login successful if user.status = success in the response
            let user = response.json();
            console.log(user.status)
            if (user && "success" == user.status) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user.data));
            }
        });
}

Answer 6

对于那些使用HttpClient而不是Http的用户，这些答案都是过时的。我开始发疯了，“我已经完成了URLSearchParams的导入，但是如果没有.toString（）和显式标头，它仍然无法工作！”

使用HttpClient时，请使用HttpParams而不是URLSearchParams并注意body = body.append()语法，以在体内实现多个参数，因为我们正在使用不可变的对象：

login(userName: string, password: string): Promise<boolean> {
    if (!userName || !password) {
      return Promise.resolve(false);
    }

    let body: HttpParams = new HttpParams();
    body = body.append('grant_type', 'password');
    body = body.append('username', userName);
    body = body.append('password', password);

    return this.http.post(this.url, body)
      .map(res => {
        if (res) {          
          return true;
        }
        return false;
      })
      .toPromise();
  }