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

我基本上想复制这个超文本传输协议请求（不是ajax），就像它是由html表单发起的一样：

URL:/api

参数：用户名和密码

Answer 1

在Angular2的更高版本中，如果将正确类型的对象传递为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标头。

注意：不要忘记从@angular/http导入URLSearchParams，否则它将无法工作。

Answer 2

我认为主体对于应用程序/x-www-form-urlencoded内容类型是不正确的。您可以尝试使用以下方法：

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

希望对你有帮助蒂埃里

Answer 3

安瓜拉尔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，我们不需要头或. 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()));
      }
    )

获取/删除方法

    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应用程序/JSON内容类型

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