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