Geek Answers Handbook

PHP does not respond to Angularjs request

I have a raw shape with some angle validation,

<form name = "sform" novalidate="true"> <table border="0"> <tr> <td> First name: </td> <td> <input type="text" name="fname" ng-model="fname" placeholder="First Name" required="true" ng-pattern="/^[A-Za-z]*$/"> </td> <td ng-show="sform.fname.$invalid && !sform.fname.$pristine" class="help-block">wrong name </td> </tr> <tr> <td> Last Name: </td> <td> <input type="text" ng-model="lname" placeholder="last Name" required="true" ng-pattern="/^[A-Za-z]*$/"> </td> <td ng-show= "sform.lname.$invalid && !sform.lname.$pristine" class="help-block">wrong Last name </td> </tr> <tr> <td> Email: </td> <td> <input type="email" ng-model="email" placeholder="email" required="true"> </td> <td ng-show="sform.email.$invalid && !sform.email.$pristine" class="help-block">wrong Email </td> </tr> <tr> <td> <button type="submit" ng-disabled="sform.$invalid" ng-click = "submitForm()">Submit</button> </td> </tr> </table> </form>

And the related .js files

far_app.js

 var farLogin = angular.module('far_login',[]);

far_formcontroler.js

 farLogin.controller('far_formcontrol',['$scope','$http',function($scope,$http) { $scope.url='http://localhost/far_submit.php'; var config = { headers : { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' } } // function to submit the form after all validation has occurred $scope.submitForm = function() { alert('our form is amazing'+$scope.fname+' '+$scope.email+' '+$scope.lname); // check to make sure the form is completely valid if ($scope.sform.$valid) { $http.post($scope.url,{"name": $scope.fname, "email": $scope.email, "lname": $scope.lname},config). success(function() { alert('our form is amazing'+$scope.fname+' '+$scope.email+' '+$scope.lname); }) } else { alert('our form is not amazing'); } } }]);

And my php file is

 <?php header("Access-Control-Allow-Origin: *"); ?> <script type="text/javascript"> alert("this is php")</script> <?php ?>

But the php script is not executed at all, and they are not an error in the browser console.

Where am I mistaken?

Thanks.

+6
source share
1 answer

there are a couple of good threads on Angular $ http post issues in SO itself, for example, look at the following thread: How can I get POST data with urlencoded with $ http in AngularJS? or this: How to send data as form data instead of request payload?

Note. You need to run this using the local web server. The code below works OK for me, I did the following:

  • The downloaded code that you provided
  • Save all of them in a local directory
  • I launched php, which was built into the php -S 0.0.0.0:8181 web server, turned to index.html at the address: http: // localhost: 8181 / submitted the form, and it returned me the answer json: {"status":"OK","data":{"userid":null}}

Pastebin: far_app.js , index.html , far_login.php

I used PHP built into the server for testing purposes only, but I highly recommend that you use something like Wampp or Xampp on Windows to run it. You can also manually configure Apache / PHP / Mysql, but Wampp / Xampp is quite easy to install and start with.

I changed the code a bit, something like the following:

  angular.module('far_login',[]) .controller('far_formcontrol',['$scope','$http', function($scope, $http) { // function to submit the form after all validation has occurred $scope.submitForm = function() { console.log('First Name : ' , $scope.fname); console.log('Email : ' , $scope.email); console.log('Last Name: ', $scope.lname); // check to make sure the form is completely valid if ($scope.sform.$valid) { $http({ url: 'http://localhost:8181/far_submit.php', method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest: function(obj) { var str = []; for(var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); return str.join("&"); }, data: {"name": $scope.fname, "email": $scope.email, "lname": $scope.lname} }) .then(function(response) { console.log(response) }) .catch(function (error) { console.log(error); }); } else { alert('our form is not amazing'); } }; }]);

this is based on Plunker from Angular doc and far_submit.php file, for example:

 <?php header("Access-Control-Allow-Origin: *"); header('Content-Type: application/json'); $data = [ 'status' => 'OK', 'data' => [ 'userid' => $autogeneratedUserId] ]; echo json_encode($data);

Make sure far_submit.php is available at http: //localhost/far_submit.php

+6
source

More articles:


All Articles