web-dev-qa-db-fra.com

Ionic 2 - Http POST paramètres corporels non envoyés

J'utilise Ionic 2 Beta 11. J'essaie d'envoyer une demande à une API externe qui renverra une réponse JSON. J'ai surmonté des problèmes liés à la SCRO et je communique avec l'API cependant Je ne peux pas envoyer les informations relatives au corps qui sont nécessaires. J'ai essayé de formater la variable body de la manière suivante, chacune sans succès:

En tant qu'objet: {email: this.email, password: this.password}

En tant qu'objet stringifié: JSON.stringify({email: this.email, password: this.password})

En tant que chaîne: 'email=' + this.email + '&password=' + this.password

Voici mon 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);
            }
        );
  }
}
httpangularionic-frameworkionic2
6
Ian Holden

Je viens de découvrir la solution à mon problème. J'essayais d'envoyer des données de type X au serveur en disant au serveur que j'envoyais des données de type Y. Je suis encore un peu confus quant aux types de données que j'envoyais, mais j'ai pu résoudre mon problèmes en utilisant le code suivant:

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);
            }
        );
  }
}
4
Ian Holden

Je suis nouveau dans Ionic 2 mais après une longue recherche, l'option de données de formulaire a fonctionné pour moi comme ci-dessous

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());
8
Ali Farhan

J'ai eu le même problème que mes paramètres n'ont pas été publiés sur mon serveur PHP. J'ai changé les paramètres au format brut (indiqué dans ma variable body), et cela a commencé à fonctionner. Voir exemple de code ci-dessous.

    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;
5
Hasnat Safder

Méthode de publication HTTP Angular2 Ionic 2

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


}

Pour plus d'informations, visitez https://ampersandacademy.com/tutorials/ionic-framework-version-2/send-data-and-receive-data-in-the-ionic-2-framework-using-angular2-http post-méthode

2
Bharathiraja