Question

我正在使用Ionic 2 Beta 11.我正在尝试向外部API发送请求，该API将返回JSON响应。我已经克服了CORS问题，但我正在与API进行通信，但我无法发送所需的正文信息。我尝试用以下方式格式化body变量，每个都没有成功：

作为对象：{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

我是Ionic 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 2

我遇到的问题是我的参数没有发布到我的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 3

我刚刚发现了解决问题的方法。我试图将一些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 4

Angular2 Ionic 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

Ionic 2 - 未发送Http POST正文参数

4 个答案: