Angular2 – Http POST请求参数

我试图做一个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格式发起的：

url：/ api

参数：用户名和密码

Answer 1

我认为body application/x-www-form-urlencoded内容types是不正确的。 你可以尝试使用这个：

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

希望它能帮助你，Thierry

Answer 2

弃用

或者你可以这样做：

 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 Content-Type

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

Answer 3

在更高版本的Angular2中，如果您将正确types的对象作为body传递，则不需要手动设置Content-Type标头并对其进行编码。

你可以做到这一点

 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不要忘记从@angular/http导入URLSearchParams ，否则它将不起作用。

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

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

然后为api函数。 这是一个login样本，可以根据您的需要进行更改。

 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

每个使用多个参数的方法都遇到了问题，但是它对于单个对象来说工作得很好

API：

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

angular度：

 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

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

使用HttpClient，使用HttpParams而不是URLSearchParams，并注意body = body.append()语法，因为我们正在处理一个不可变的对象，所以在body中实现了多个参数：

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

Answer 8

当我试图做类似的事情时，我降落在这里。 对于application / x-www-form-urlencoded内容types，您可以尝试将其用于body：

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

与你尝试做的值分配给身体将是一个string。