Angular Post Request to PHP

Sending Post data from angularjs to PHP code is one of the tedious task and when I search it on Google I found posts which either too complex or not well written to understand concept properly.

I have solved the issue with less line of code and in more understanding and expressive way.

LIVE DEMO DOWNLOAD
You can clone the repository using

git clone https://github.com/codeforgeek/angular-post-php.git

Before heading to Angular HTTP Post let me show you how we do http.post call in JQuery. Here is a code snippet to do that.

$.post("filename.php",{var1: data, var2: data},function(data){
//Do something with data return from PHP file.
});

In PHP code we use $_POST global variable to access var1,var2. As simple as that. Problem arise with Angular because POST method which angular uses send data using JSON. So in PHP Script if we use $_POST directly we will not be able to receive POST data.

Let’s create one angular project and in that one simple Login form consist of email and password field. I hope you have read basic angularjs tutorial and know how to setup angular project. If not let me give you a quick review.

Very first thing you will need is angularjs library which you can either download or add using CDN, up to you. I use to download it and add it in local folder.

Link : Download Angularjs library (copy and paste the code in angular.js file)

Attach it to your project using

before <head> section.

Now let’s create our login form in HTML. Under the section of your HTML page. Copy paste these code.

<div id="container">
<div id="login" ng-app='angular_post_demo' ng-controller='sign_up'>
<input type="text" size="40" ng-model="email"><br>
<input type="password" size="40" ng-model="password"><br>
<button ng-click="check_credentials()">Login</button><br>
<span id="message"></span>
</div>
</div>

We have name our angular app as “angular_post_demo” and controller as “sign_up”. Let’s create our app.js file to initialize angular app. Create file name as “app.js” and put this code in it.

app.js

var app = angular.module('angular_post_demo', []);

Done ! We have initiated our app. let’s code some JavaScript to deal with form handling. Create another file as “home.js” and put these code in it.

home.js

app.controller('sign_up', function ($scope, $http) {
/*
* This method will be called on click event of button.
* Here we will read the email and password value and call our PHP file.
*/
$scope.check_credentials = function () {

document.getElementById("message").textContent = "";

var request = $http({
method: "post",
url: window.location.href + "login.php",
data: {
email: $scope.email,
pass: $scope.password
},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
document.getElementById("message").textContent = "You have login successfully with email "+data;
});
}
});

Note: add these files using <script> tag under <head> section.

Major change is in the PHP file. Here is how to read POST data in PHP sent from Angular.

login.php

<?php
/*
* Collect all Details from Angular HTTP Request.
*/
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
@$email = $request->email;
@$pass = $request->pass;
echo $email; //this will go back under "data" of angular call.
/*
* You can use $email and $pass for further work. Such as Database calls.
*/
?>

file_get_contents() reads the file and convert it into string and by using json_decode() we can determine which part of data we would like to access.

You can download the code from Github either by cloning it or zip file. To run it paste it in “HTDOCS” folder of XAMPP and hit using browser url.