Baljeet Singh

2 minute read

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”.

comments powered by Disqus