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-сервер. Я изменил параметры на необработанный формат (показано в моей переменной body), и он начал работать. См. Пример кода ниже.

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