Ionic 2 - Http POST object parameters not sent

Question

I am using Ionic 2 Beta 11. I am trying to send a request to an external API that will return a JSON response. I have overcome CORS problems and I am communicating with the API, but I cannot send body information that is required. I tried to format the body variable in the following ways, each of which was unsuccessful:

As an object: {email: this.email, password: this.password}

As a string object: JSON.stringify({email: this.email, password: this.password})

Like a line: 'email=' + this.email + '&password=' + this.password

Here is my code:

 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

I just found a solution to my problem. I tried to send some data of type X to the server, telling the server that I was sending data of type Y. I was still a little confused about the types of data that I sent, but I was able to resolve mine using the following code:

 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

I am new to Ionic 2, but after a long search. The form data form worked for me as below

 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

I had the same problem that my parameters were not sent to my PHP server. I changed the parameters to the raw format (shown in my body variable) and it started working. See the sample code below.

  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 Ionic 2 HTTP Message Method

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

For more information, visit https://ampersandacademy.com/tutorials/ionic-framework-version-2/send-data-and-receive-data-in-the-ionic-2-framework-using-angular2-http-post -method