How to do $http POST with AngularJS in php

Doing a POST request in AngularJS is bit tricky. If you do it like below, you cannot access the POST variables with $_POST or $_REQUEST via php. With the below method, you can access POST variables only via file_get_contents();

$http({
	url: "api/getUserData",
		method: "POST",
		data:{user_id:app.user_id}
	}).success(function(data, status, headers, config) {
		$scope.data = data;
	}).error(function(data, status, headers, config) {
		$scope.status = status;
});

$http({

url: "api/getUserData",

method: "POST",

data:{user_id:app.user_id}

}).success(function(data, status, headers, config) {

$scope.data = data;

}).error(function(data, status, headers, config) {

$scope.status = status;

});

How to get POST values with above method

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$user_id = $request -&gt; user_id;

$postdata = file_get_contents("php://input");

$request = json_decode($postdata);

$user_id = $request -> user_id;

The reason is, AngularJS doesn’t serialize the data ( parameters ) passed to the POST request automatically. Therefore we have to serialize the data with $.params() which is available in jQuery . Also the default content-type of the posted data is application/json. Therefore we need to override the Content-type headers of the post request to application/x-www-form-urlencoded in order to access the the posted values via $_POST or $_REQUEST

$http({
	url: "api/getUserData",
		method: "POST",
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		data: $.param({user_id:app.user_id})
	}).success(function(data, status, headers, config) {
		$scope.data = data;
	}).error(function(data, status, headers, config) {
		$scope.status = status;
});

$http({

url: "api/getUserData",

method: "POST",

headers: {'Content-Type': 'application/x-www-form-urlencoded'},

data: $.param({user_id:app.user_id})

}).success(function(data, status, headers, config) {

$scope.data = data;

}).error(function(data, status, headers, config) {

$scope.status = status;

});

You can access POST values in above method as shown below.

$user_id = $_POST['user_id'];

1	$user_id = $_POST['user_id'];

10 thoughts on “How to do $http POST with AngularJS in php”

Eric Diviney December 10, 2013 at 10:23 am

Didn’t work for me…. Been trying to figure this out for awhile now. Can’t seem to access angular posted data from PHP.

Reply ↓

Eric Diviney December 10, 2013 at 10:25 am

Wait, just changed the http headers. Now it worked! Thanks!

Reply ↓
1. ajay March 5, 2014 at 6:13 pm
  
  can u please explain me about url ? i couldn’t post the data
  
  Reply ↓

Tjorriemorrie January 21, 2014 at 2:20 pm

Yeah, this is AWESOME!!! I’ve been struggling for ever to find something that works elegantly. Will it work with file uploads as well?

Reply ↓

Thomas Kingo November 6, 2014 at 2:41 am

This article totally saved my day!
I added the $.param and the header “content-type” in the module.config().
Now I can pass data with the regular $http shorthand and receive it in php with $_POST.
Thanks for sharing. Much appreciated!

Reply ↓