Ionic 2 - Http POST正文參數不被髮送

Question

我正在使用Ionic 2 Beta 11.我試圖發送請求到外部API，它將返回一個JSON響應。我已經克服了CORS問題，並且正在與API進行通信，但是我無法發送所需的正文信息。我曾嘗試通過以下方式格式化體變量，每個沒有成功：

作爲一個對象：{email: this.email, password: this.password}

作爲一個字符串化的對象：JSON.stringify({email: this.email, password: this.password})

作爲一個字符串：'email=' + this.email + '&password=' + this.password

這裏是我的代碼：

import {Component}          from '@angular/core'; 
import {NavController, MenuController}     from 'ionic-angular'; 
import {Http, Headers, RequestOptions}     from '@angular/http'; 
import 'rxjs/Rx'; 

@Component({ 
    templateUrl: 'build/pages/login/login.html' 
}) 
export class LoginPage { 
    nav: NavController;  
    username: string; 
    password: string; 

    constructor(nav: NavController, private http: Http) { 
    this.nav = nav; 
    } 

    doLogin() { 
    let body = JSON.stringify({ 
     email: this.username, 
     password: this.password }); 
    let headers = new Headers({ 
     'NDAPI-Key': 'XXXXXXXXXX', 
     'NDAPI-Host': 'XXXXXXXXXXX' }); 
    let options = new RequestOptions({ headers: headers }); 

    this.http 
     .post('/api', body, options) 
     .map(res => res.json()) 
     .subscribe(
      data => { 
       console.log(data); 
      }, 
      err => { 
       console.log("ERROR!: ", err); 
      } 
     ); 
    } 
} 

Answer 1

我剛剛發現瞭解決方案，我的問題。我試圖向服務器發送一些類型爲X的數據，同時告訴服務器我正在發送類型爲Y的數據。對於我發送的數據類型，我仍然有點困惑，但是我已經能夠解決我的問題了通過使用下面的代碼問題：

import {Component}          from '@angular/core'; 
import {NavController}         from 'ionic-angular'; 
import {Http, Headers, RequestOptions}     from '@angular/http'; 
import 'rxjs/Rx'; 

@Component({ 
    templateUrl: 'build/pages/login/login.html' 
}) 
export class LoginPage { 
    nav: NavController; 

    username: string; 
    password: string; 

    constructor(nav: NavController, private http: Http) { 
    this.nav = nav; 
    } 

    doLogin() { 
    let body = new FormData(); 
    body.append('email', this.username); 
    body.append('password', this.password); 
    let headers = new Headers({ 
     'NDAPI-Key': 'XXXXXXXXX', 
     'NDAPI-Host': 'XXXXXXXXX' }); 
    let options = new RequestOptions({ headers: headers }); 

    this.http 
     .post('/api', body, options) 
     .map(res => res.json()) 
     .subscribe(
      data => { 
       console.log(data); 
      }, 
      err => { 
       console.log("ERROR!: ", err); 
      } 
     ); 
    } 
} 

Answer 2

我是新來的離子2，但經過長時間搜索表單數據選項工作對我來說就像下面

let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let body = new FormData(); 
    body.append('username', username); 
    body.append('password', password); 
    console.log(body); 
    console.log(headers); 
    return this.http.post('http://api/v1/get_user',body,headers).map((res: Response) => res.json()); 

Answer 3

我有我的參數未公佈了同樣的問題到我的PHP服務器。我將參數更改爲原始格式（顯示在我的主體變量中），並開始工作。請參閱以下示例代碼。

let headers = new Headers({ 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }); 
    let options = new RequestOptions({ 
     headers: headers 
    }); 
    // TODO: Encode the values using encodeURIComponent(). 
    let body = 'email=' + email + '&password=' + password; 

Answer 4

Angular2離子2 HTTP POST方法

import {Http, Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Component({ 
selector: 'page-home', 
templateUrl: 'home.html' 
}) 
export class HomePage { 


constructor(public http:Http) { } 


postCall() 
{ 
let headers = new Headers(); 
headers.append('Content-Type', 'application/json'); 
let data=JSON.stringify({username:"raja"}); 
this.http.post('http://localhost/ionic/postResponse.php',data,headers) 
.map(res => res.json()) 
.subscribe(res => { 
alert("success "+res); 
}, (err) => { 
alert("failed"); 
}); 
} 


} 

欲瞭解更多信息請訪問https://ampersandacademy.com/tutorials/ionic-framework-version-2/send-data-and-receive-data-in-the-ionic-2-framework-using-angular2-http-post-method