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