HTTP POST using Angular.js

Question

I\'m new to the scene and I want to use Angular.js to make an HTTP POST request. I\'m accessing PHP scripts which have parameters that are just POST variables. What gets ret

Answer 1

Rather old post... but I figure my solution might come in handy for others as well.

I did not like the

json_decode(file_get_contents("php://input"));

solution... Basically because it seems against good practice (I might be wrong on this)

This is how I got it solved (adapted to the example above)

function PhpCtrl($scope, $http, $templateCache) {
  var method = 'POST';
  var url = 'url.php';
  $scope.codeStatus = "";
  $scope.add = function() {
    var FormData = {
      'name' : document.f1.name.value,
      'password' : document.f1.password.value
    };
    $http({
      method: method,
      url: url,
      data: $.param({'data' : FormData}),
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      cache: $templateCache
    }).
    success(function(response) {
        $scope.codeStatus = response.data;
    }).
    error(function(response) {
        $scope.codeStatus = response || "Request failed";
    });
    return false;
  };
}

once this done

data: $.param({'data' : FormData}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'},

you can access the data you normally would in PHP

$data = $_POST['data'];

Answer 2

Acctually the problem is in the backend with PHP you don't retrieve the posted data like usual, this worked for me:

function PhpCtrl($scope, $http, $templateCache) {
  var method = 'POST';
  var url = 'url.php';
  $scope.codeStatus = "";
  $scope.add = function() {
    var FormData = {
      'name' : document.f1.name.value,
      'password' : document.f1.password.value
    };
    $http({
      method: method,
      url: url,
      data: FormData,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      cache: $templateCache
    }).
    success(function(response) {
        $scope.codeStatus = response.data;
    }).
    error(function(response) {
        $scope.codeStatus = response || "Request failed";
    });
    return false;
  };
}

in the PHP file:

$data = json_decode(file_get_contents("php://input"));
echo $data->name;

Hope this help.

Answer 3

A possible alternative it is to use an XHR request handler to serialize the payload of the POST request.

$httpProvider.interceptors.push(['$q', function($q) {
    return {
        request: function(config) {
            if (config.data && typeof config.data === 'object') {
                // Check https://gist.github.com/brunoscopelliti/7492579 for a possible way to implement the serialize function.
                config.data = serialize(config.data);
            }
            return config || $q.when(config);
        }
    };
}]);

Moreover, if you didn't do it before, you've also to change the default content-type header of the post request:

$http.defaults.headers.post["Content-Type"] = 
    "application/x-www-form-urlencoded; charset=UTF-8;";

Recently I wrote a post on my blog, where you could find more info about this approach, and XHR request interceptor.