I'm trying to use http request for a login form but I keep on Getting Null value in my php api when I hit it from my ionic 2 app (localhost)

here is my login.ts code can anybody help me out if I’m doing any thing wrong!!

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { HomePage } from ‘…/home/home’;
import { MyaccPage } from ‘…/myacc/myacc’;
import { MyprofPage } from ‘…/myprof/myprof’;
import { CommonTasks } from ‘…/…/app/common_tasks’;
import { Http,Headers } from ‘@angular/http’;
import * as $ from ‘jquery’;
import ‘rxjs/Rx’;

/**

@IonicPage()
@Component({
selector: ‘page-usrlogin’,
templateUrl: ‘usrlogin.html’,
})
export class UsrloginPage {
public username: any;
public password: any;
//public loginProcessUrl: string = “”;

constructor(public navCtrl: NavController, public navParams: NavParams, public commonTasksObj: CommonTasks, public http: Http) {

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad UsrloginPage’);
}
close() {
this.navCtrl.push(HomePage)
// }
// myacc() {
// console.log(this.username + " " + this.password);
// this.navCtrl.setRoot(MyaccPage);
}
myprof() {
this.navCtrl.push(MyprofPage)
}

validateForm() {
if (this.username == undefined || this.username.trim() == “”) {
this.commonTasksObj.displaySimpleToast(“Please Enter your Username”);
return false;
}
if (this.password == undefined || this.password.trim() == “”) {
this.commonTasksObj.displaySimpleToast(“Please Enter your Password”);
return false;
}

this.loginProcess();

}

loginProcess() {
let headers = new Headers();
headers.append(‘Content-Type’, ‘application/json’);

let data = {
  user_name: this.username,
  user_pass: this.password
};

this.http.post('http://aaaaaa.com/api/login.php', JSON.stringify(data), {headers: headers})
  .subscribe(res => {
    console.log(res.json());
  }, (err) => {
    console.log(err);
  });
}

}

Try to use three backticks, then your code, then three backticks again to format your code like this:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { MyaccPage } from '../myacc/myacc';
import { MyprofPage } from '../myprof/myprof';
import { CommonTasks } from '../../app/common_tasks';
import { Http, Headers } from '@angular/http';
import * as $ from 'jquery';
import 'rxjs/Rx';

@IonicPage()
@Component({
  selector: 'page-usrlogin',
  templateUrl: 'usrlogin.html',
})
export class UsrloginPage {
  public username: any;
  public password: any;
  //public loginProcessUrl: string = "";

  constructor(public navCtrl: NavController, public navParams: NavParams, public commonTasksObj: CommonTasks, public http: Http) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad UsrloginPage');
  }
  close() {
    this.navCtrl.push(HomePage)
    // }
    // myacc() {
    // console.log(this.username + " " + this.password);
    // this.navCtrl.setRoot(MyaccPage);
  }
  myprof() {
    this.navCtrl.push(MyprofPage)
  }

  validateForm() {
    if (this.username == undefined || this.username.trim() == "") {
      this.commonTasksObj.displaySimpleToast("Please Enter your Username");
      return false;
    }
    if (this.password == undefined || this.password.trim() == "") {
      this.commonTasksObj.displaySimpleToast("Please Enter your Password");
      return false;
    }

    this.loginProcess();
  }

  loginProcess() {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    let data = {
      user_name: this.username,
      user_pass: this.password
    };

    this.http.post('http://aaaaaa.com/api/login.php', JSON.stringify(data), { headers: headers })
      .subscribe(res => {
        console.log(res.json());
      }, (err) => {
        console.log(err);
      });
  }
}

You can try to change your method to this and check in your console if your credentials are set correctly:

loginProcess() {
    const headers = new Headers({
      'Content-Type': 'application/json'
    });

    const data = {
      user_name: this.username,
      user_pass: this.password
    };
    console.log('Credentials: ', data);
    this.http.post('http://aaaaaa.com/api/login.php', data, { headers })
      .subscribe(res => {
        console.log(res.json());
      }, (err) => {
        console.log(err);
      });
  }
1 Like

Thank you for your reply “Nexi”, the problem has been resolved and the issue was from back end.