In this tutorial, you will learn, how to communicate with the server using the Angular2 HTTP POST method. You can send data and receive data using the Angular2 HTTP POST method.

If you are the web developer, then you will use the term AJAX, which is a technology, which is used to send data to the server and receive the response from the server using asynchronous request and response method. The same way, the Angular2 HTTP will work. 

The response from the server is mostly JSON data. Why because it is easy to process the JSON data in Javascript. However, you can set your own response data type.

In this demo, I used the PHP server to process the POST data. So use the below code to catch the POST data using the PHP server.

<?php

header('Access-Control-Allow-Origin: *');

if ($_SERVER['REQUEST_METHOD'] === 'POST') 
{
        
        $postdata = file_get_contents("php://input");
        $request = json_decode($postdata);
        $username=$request->username;
        echo json_encode("Username is ".$username);

}
else
{
    echo "Not allowed";
}

?>

The above PHP server script will catch the data and return the captured data as the response in the JSON format. This is the simple example. However, you can write your own complex logic to process the data. And don't forget to implement the CORS(Cross-origin resource sharing). If you are using any other server, then you must use other servers specific CORS syntax to enable it. If you are not enabled the CORS, then the ajax request won't work.

The POST data URL will be like this.

http://localhost/ionic/postResponse.php

Create a new Ionic 2 project using

ionic start postHttp blank --v2

Then open the home.html and create a button with click event.

<button ion-button color="danger" (click)="postCall()" > Post Request</button>

Now open the home.ts file and import the HTTP library from the Angular2 using.

import {Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

Then create a reference for the Http in the constructor.

constructor(public http:Http) { }

Then create a header reference, which will be included in the request header.

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

Then create data, which will be sent to the server.

let data=JSON.stringify({username:"raja"});

Now call the Http post method and pass the header and data.

 

this.http.post('http://localhost/ionic/postResponse.php',data,headers)
.map(res => res.json())
.subscribe(res => {
alert("success "+res);
}, (err) => {
alert("failed");
});

The response from the server will be displayed as an alert.

Full Code

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


}

You can test the HTTP POST method in the browser. Type the below command in the root of the Ionic 2 project to preview it.

ionic serve --lab

The command will create a preview of iOS, Android, and Windows in the browser.