AngularJS HTTP Post to PHP

Question

I am posting some data to a php page from angularjs controller using the $http method as shown below.

$scope.login = function(){
    var data = {
        'username' : $scope.username,
        'password' : $scope.password
    };
    $http.post('login.php', data).success(function(response){
        console.log(response);
    });
};

I know I can retrieve this data in php using :

$postdata = json_decode(file_get_contents('php://input'), true);

But I was wondering if there is better way in angularjs so I could use the simple $_POST in php to retrieve the data.

In jQuery we could just simply use $.post and those are available for php in $_POST. Why for angularjs that is not that simple. Is there any way to populate $_POST of php when we do a $http post request in angularjs. Please help.

Possible duplicate of [receive json post with php](http://stackoverflow.com/questions/18866571/receive-json-post-with-php) — Manel, Nov 05 '15 at 09:02
I checked the post you mentioned. But that post doesn't explain how to populate `$_POST` — Adersh, Nov 05 '15 at 09:05
You'll need to override `$httpProvider.defaults.transformRequest` to a transformer that serialises the `data` into a standard URL-encoded format instead of JSON. Read the documentation for some samples. That's just to point you in the right direction, if someone wants to develop this into a full answer by all means please do. — deceze, Nov 05 '15 at 09:08
`if($_SERVER['HTTP_CONTENT_TYPE']==='application/json') $_POST=json_decode(file_get_contents('php://input'), true);` — vp_arth, Nov 05 '15 at 09:26

vp_arth · Accepted Answer · 2015-11-05T10:23:36.040

5

You need to convert your request to php known format.
I use jQuery $.param method to build it. You can write your own.

app.config(['$httpProvider', function($http) {  
    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    $http.defaults.transformRequest = function(data) {
            return $.param(data);
        };
    }]);

urlencoded is followed simple format:

username=Name&password=My%20Password

JSFiddle

edited Nov 05 '15 at 10:23

answered Nov 05 '15 at 09:39

vp_arth

14,461
4
37
66

getting an empty array when `print_r($_POST)` – Adersh Nov 05 '15 at 10:05
I add fiddle for this – vp_arth Nov 05 '15 at 10:23
Be carefull with `Content-Type` capitalization. One already exists, and if you write it wrong - two headers will be sended. HTTP server selects one of this (undefined behavior) – vp_arth Nov 05 '15 at 10:27
@Adersh, success? Or still have issues? – vp_arth Nov 05 '15 at 10:32
I can't understand how the data is to be received in php for this method. via `$_POST` I am getting an empty array. – Adersh Nov 05 '15 at 10:34
Are you check header name capitalization? It should be exactly `Content-Type`, not `Content-type`. Also, you can see, how it works in the fiddle(Just change httpbin.org to your server). – vp_arth Nov 05 '15 at 10:35

Adersh · Answer 2 · 2016-04-11T18:02:21.043

2

Got it working using jQuery $.param method. Thanks to vp_arth's answer. I just added this answer as it might help someone. This can be used if it is needed for only one request.

$scope.login = function(){
    var data = {
        'username' : $scope.username,
        'password' : $scope.password
    };

    $http({
        url: "login.php",
        method: "POST",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $.param(data)
    }).success(function(response){
        console.log(response);
    });

};

edited Apr 11 '16 at 18:02

answered Nov 05 '15 at 11:10

Adersh

598
1
9
22

It usable if you have only one request. I strongly recommend to use `transformRequest`, if you have more than one post request in your project. It left your code clean and readable, like `$http.post(url, data)` – vp_arth Nov 05 '15 at 11:34
yes,..you are correct. I have accepted and voted up your answer :) just added this answer as it might help someone. – Adersh Nov 05 '15 at 13:14

score 1 · Answer 3 · answered Nov 05 '15 at 10:32

1

well I just use this in my controller class, so all my post requests: normal ones with jQuery or the ones through angular all end up being in $_post

    if ($_SERVER['REQUEST_METHOD'] == 'POST' && empty( $_POST ))
        $_POST=$_REQUEST = json_decode( file_get_contents( 'php://input' ), true );

have fun,

answered Nov 05 '15 at 10:32

azerafati

18,215
7
67
72

More correct to check `Content-type` header as I wrote in comment above. To be sure, that client sends json. – vp_arth Nov 05 '15 at 10:34
@vp_arth, not necessarily, if `$_post` is empty so it's from angular, no need for more complexity here. – azerafati Nov 05 '15 at 10:37
1

It looks more complex for me now. `empty($_POST)` is incorrect and magic. It can be empty in other cases. Also what should we doing with other queries, like `PUT` or `PATCH`? – vp_arth Nov 05 '15 at 10:44
@vp_arth OP asked about POST, for other cases you could use a `switch` statement. `$_post` is an array so we can always check it with the `empty` function, why incorrect?? – azerafati Nov 05 '15 at 11:23

AngularJS HTTP Post to PHP

3 Answers3

Linked