After searching through many articles for how to send AngularJS POST data to PHP, the solutions i found were not up to the point. So, i decided to create a simple login form that will POST data to PHP & in the PHP file we can check the posted data against the values in our mysql database or whatever database, but i am checking the requested data against the static values & then the PHP script return the response back to the client side. There are 3 files namely index.html, app.js, login.php
- In the index.html, there is login form
- In the app.js, Angular module & controller is defined
- In the login.php, the validation is done (currently againt static values)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Post data with PHP</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<h1>AngularJS ajax POST with PHP</h1>
<div ng-app='angularPostPHP' ng-controller='loginCtrl'>
<input class="form-control" type="text" ng-model="email" placeholder="Enter Your Email"><br>
<input class="form-control" type="password" ng-model="password" placeholder="Enter Your Password"><br>
<button class="btn btn-success" ng-click="login()">Login</button><br>
<span>{{responseMessage}}</span>
</div>
</div>
</body>
</html>
app.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Post data with PHP</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<h1>AngularJS ajax POST with PHP</h1>
<div ng-app='angularPostPHP' ng-controller='loginCtrl'>
<input class="form-control" type="text" ng-model="email" placeholder="Enter Your Email"><br>
<input class="form-control" type="password" ng-model="password" placeholder="Enter Your Password"><br>
<button class="btn btn-success" ng-click="login()">Login</button><br>
<span>{{responseMessage}}</span>
</div>
</div>
</body>
</html>
});
login.php
<?php
// check username or password from database
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$email = $request->email;
$password = $request->password;
if($email == "one" && $password== "one"){
echo "1";
}
else {
echo "0";
}
?>
Copy the contents to their respective files & then run index.html. Right Username/Password Combination: one / one When you type this username/ password combination, you will get successfully logged in & when wrong combination, you will get Username or Password is incorrect as described in the app.js. Which is done with the response from the login.php. If login.php return 1 then we get "Successfully Logged in" else we get "Username or Password is incorrect".