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请求（不阿贾克斯）就像是起源通过HTML表单：

网址：/ API

PARAMS：用户名和密码

Answer 1

我觉得身体不是一个application/x-www-form-urlencoded内容类型正确。您可以尝试使用此：

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

希望它可以帮助你， 蒂埃里

Answer 2

我降落在这里的时候，我试图做类似的事情。对于应用程序/ x-WWW的形式urlencoded的内容类型，你可以尝试用这个身体：

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

你试着做分配到体将是一个字符串值是什么。的

Answer 3

更新Angualar 4.3+

现在我们可以用HttpClient代替Http

指南是here

示例代码

const myheader = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded') 
const body = new HttpParams().set('username', USERNAME).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年

从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 4

所以只是为了让它成为一个compl ETE答案：

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

在以后的版本中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头。

P.S.不要忘记从@angular/http导入URLSearchParams，否则它将无法工作。

Answer 6

我是用多个参数具有与每一个方法的问题，但它工作得很好用单一的对象

API：

[HttpPut] 
    [Route("addfeeratevalue")] 
    public object AddFeeRateValue(MyValeObject val) 

角：

var o = {ID:rateId, AMOUNT_TO: amountTo, VALUE: value}; 
return this.http.put('/api/ctrl/mymethod', JSON.stringify(o), this.getPutHeaders()); 


private getPutHeaders(){ 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    return new RequestOptions({ 
     headers: headers 
     , withCredentials: true // optional when using windows auth 
    }); 
} 

Answer 7

如果有人挣扎角度版本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 8

这些答案都已经过时了那些利用HttpClient的，而不是HTTP。我开始疯狂地想：“我已经完成了URLSearchParams的导入，但是如果没有.toString（）和显式头文件，它仍然不起作用！”

随着HttpClient的，使用的HttpParams代替URLSearchParams并注意body = body.append()语法在体内实现多PARAMS因为我们有一个不可变对象的工作：

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