How to send ajax request [POST] from Angular 2 to PHP?

Question

I'm getting frustrated since I've been trying my best to accomplish this kind of problem, searching for documentation and searching for possible duplicate question.

I've read this documentation https://angular.io/docs/ts/latest/guide/server-communication.html but this doesn't have an example of posting data with PHP.

What I want to do is to check the database if it has a transaction that hasn't been approve. It runs every 3 seconds.

Here's what I've got

I created my Service [get-new-data.service.ts]

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class GetNewDataService {
    constructor(private http: Http) { }
    private url = 'app/service/getDataService.php';

    getData(bangko) {
        let headers = new Headers('Content-Type', 'application/x-www-form-urlencoded'),
            options = new RequestOptions({ headers: headers }),
            bank = `bank=${bangko}`;

        return this.http.post(this.url, bank, options).map(res => res.json());
    }
}

On my app.module.ts, I imported the HttpModule - imports and GetNewDataService - providers.

On my component

import { Component, OnInit } from '@angular/core';
import { GetNewDataService } from '../service/get-new-data.service';
import { Observable } from 'rxjs/Rx';

@Component({
    templateUrl: 'app/tpl-html/mandiri.component.html'
})

export class MandiriComponent implements OnInit {
    constructor(private getDataService: GetNewDataService) { }

    ngOnInit() {
        setInterval(() => {
            this.getDataService.getData('mandiri')
                .subscribe(res => console.log(res));
        }, 3000)
    }
}

I don't know how to make proper request and integrate my angular 2 app with mysql and php.

Any help would be appreciated. Thanks :/

Answer 1

Post JSON from angular 2 to php

http://4dev.tech/2016/07/using-http-client-to-integrate-angular2-to-php/

var link = 'app/service/getDataService.php';
var data = JSON.stringify({username: this.data.username});

this.http.post(link, data)
.subscribe(data => {
 this.data.response = data._body;
}, error => {
    console.log("Oooops!");
});

Answer 2

Here we go..

Html

<div ng-app="myApp">
 <form ng-controller="FormCtrl" ng-submit="submitForm()">
    First name:    <br/><input type="text" ng-model="form.firstname">    <br/><br/>
    Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>
    Description:<br/> <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>
        <br/>
    <input type="radio" ng-model="form.gender" value="female" />Female ...
    <input type="radio" ng-model="form.gender" value="male" />Male <br/>
        <br/>
    <input type="checkbox" ng-model="form.member" />Already a member
        <br/>
    <input type="submit" ngClick="Submit" >
 </form>
 <div id="getdata"></div>
</div>

Script

  var app = angular.module('myApp', ['ngSanitize']);
  app.controller('FormCtrl', function ($scope, $sce, $http) {
   var formData = {
      firstname: "default",
      emailaddress: "default",
      textareacontent: "default",
      gender: "default",
      member: false
   };
  $scope.submitForm = function() {
    $http({
         url: "form.php",
         data: $scope.form,
         method: 'POST',
         headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}

        }).success(function(data){
           console.log("OK", data);
      }).error(function(err){"ERR", console.log(err)})
    };
  });

Php

 $file = 'form2.txt';
 $postdata = file_get_contents("php://input");
 $data = json_decode($postdata, true);
 echo '<h3>Name ='.$data['firstname']."<br/>".'Email ='.$data['emailaddress']."<br/>".'Description ='.$data['textareacontent']."</h3>";