JSON POST WITH PHP IN ANGULARJS

Size: px

Start display at page:

Download "JSON POST WITH PHP IN ANGULARJS"

Marcia Davidson
6 years ago
Views:

1 JSON POST WITH PHP IN ANGULARJS The POST method is used to insert the data. In AngularJS, we should post the form data in JSON format to insert into the PHP file. The PHP server side code used to get the posted data from AngularJS and decode to JSON format. Sample code for JSON post with PHP in AngularJS: <!DOCTYPE html> <html> <head> <title>wikitechy AngularJS Tutorials</title> <scriptsrc=" angularjs/1.5.6/angular.min.js"> </script> </head> <body ng-app="myapp" ng-controller=" jsonpostctrl" > <h1>json POST with PHP in AngularJS</h1> <form name="userform" ng-submit=" submitform()"> <p> Enter Name : <input type="text" required ng- model="user.name"> </p> <p> Enter Mobile : <input type="text" required ng-model="user.mobile"></p> <p>enter <input type=" " required ng-model="user. "></p> <button type="submit">insert</button><br> </form> <div> {{content}} </div> <h3>please Use Ctrl+F5 for Refresh.</h3> </body> <script>

2 var app = angular.module("myapp", []); app.controller("jsonpostctrl", function($scope, $http) { $scope.user = {}; $scope.submitform = function() { $http({ method : 'POST', url : 'insert.php', data : $scope.user, headers : {'Content-Type': 'application/x-www-form- urlencoded'} }).success(function(data) { $scope.content = data; }); }; }); </script> </html> POST Data to PHP File in JSON format: Set of data has been posted through AngularJS to PHP and retrieve the result from PHP file. $scope.submitform = function() { $http({ method : 'POST', url : 'insert.php', data : $scope.user, headers : {'Content-Type': 'application/x-www-form-urlencoded'} }).success(function(data) { $scope.content = data; });

3 Code Explanation for JSON post with PHP in AngularJS: 1. The name= userform is used to give the form name as userform. 2. The submitform() function is used to call the function on form submit. 3. The textbox is used to get the name from the user. 4. The textbox is used to get the Mobile Number from the user. 5. The textbox is used to get the from the user.

4 6. The {{content}} is used to display the $msg when the user click the submit button. 7. The jsonpostctrl is used to create the controller for the Application with arguments $scope object and $http service. 8. The submitform function is used to POST the submitted data $scope.user to the insert.php. 9. The $scope.content=data is used to get the updated results as response data. Sample code for insert.php: <?php error_reporting(0); $_POST = json_decode(file_get_contents('php://input'), true); If (!empty($_post['name']) &&!empty($_post['mobile'] &&!empty($_post[' '])) { $msg="submitted successfully"; } else { $msg = Invalid data ; } echo $msg;?>

5 Code Explanation for insert.php: 1. The json_decode function is used to decode the JSON formatted POST data. 2. To check the posted data is empty or not. 3. If the posted data are not empty, then is displays a message as Submitted successfully. 4. Else it is displays a message as Invalid data.

6 Sample Output for JSON post with PHP in AngularJS: 1. The output shows that the details are filled in the form.

7 2. The output shows that the user click the Insert button. 3. When the user click the Insert button then the message Submitted Successfully will displayed by using $http POST method and insert.php file.

HTML DOM IN ANGULARJS

HTML DOM IN ANGULARJS The AngularJS provides directives for binding application data to the HTML DOM element s attribute. These are the HTML DOM attributes used in AngularJS. o Show as ng-show directive.