$http.post from angular reaches php, but response is not received back in angularjs

Question

I'm having this weird issue where you already did something thousands of time but this time won't work. I've been on it for two days and can't fix it.

So my code is very simple :

js :

$http.post('datas/test.php', data)
    .success(function(response) 
             console.log(response);
     })
    .error(function() {
             console.log("error");
     });

test.php :

<?php
$user=json_decode(file_get_contents('php://input'));
echo json_encode($user);
?>

When I do a console.log(data) before the $http.post it's containing an object with two fields which are both strings but the console.log(response) give me a null so every time I try to access a variable like $user->something it gives me an error.

I'm having a second issue that is really weird too : when I run my app and call the $http.post it gives me all the errors I said before, but if I try an other time, the $http.post won't call at all until I reboot the server (it's giving me a bad gateway).

I tested many things like changing the way I call my file :

$http({
    method: 'POST',
    url: 'datas/test.php',
    data: data,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} // Or 'application/json'
});

but this is giving me exactly the same behavior.

Thank you in advance for helping me out and have a good day ! ;)

PS: I'm using PHPStorm in case it has anything to do with the server reboot thing.

Answer 1

If you use the content type 'application/x-www-form-urlencoded' you should pass the data in the urlencoded format (ie. "var1=val1&var2=val2").

Otherwise, if you use 'application/json', you can pass directly your javascript object.

Let me know if I can help you better.

Bye

Answer 2

For First Approach

To use angular $http.post in correct way you shoud handal promise correctly by using .then method not the success method.

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

Please check the angular documentation for using $http.post

For Second Approach

Look like data is not transform correctly. By default, the $http service will transform the outgoing request by serializing the data as JSON and then posting it with the content-type, "application/json". But you want to post the value as a FORM post, so you need to change the serialization algorithm and post the data with the content-type, "application/x-www-form-urlencoded".

Following code reference from this link

var request = $http({
method: "post",
url: "datas/test.php",
transformRequest: transformRequestAsFormPost,
data: {
  id: 4,
  name: "Test",
  status: "Something"
}
});

// Store the data-dump of the FORM scope.
request.success(
function( html ) {

$scope.cfdump = html;

}
);

And the TransformRequestAsFormPost implementation

app.factory(
"transformRequestAsFormPost",
function() {

// I prepare the request data for the form post.
function transformRequest( data, getHeaders ) {

var headers = getHeaders();

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

return( serializeData( data ) );

}


// Return the factory value.
return( transformRequest );


// ---
// PRVIATE METHODS.
// ---


// I serialize the given Object into a key-value pair string. This
// method expects an object and will default to the toString() method.
// --
// NOTE: This is an atered version of the jQuery.param() method which
// will serialize a data collection for Form posting.
// --
// https://github.com/jquery/jquery/blob/master/src/serialize.js#L45
function serializeData( data ) {

// If this is not an object, defer to native stringification.
if ( ! angular.isObject( data ) ) {

return( ( data == null ) ? "" : data.toString() );

}

var buffer = [];

// Serialize each key in the object.
for ( var name in data ) {

if ( ! data.hasOwnProperty( name ) ) {

continue;

}

var value = data[ name ];

buffer.push(
encodeURIComponent( name ) +
"=" +
encodeURIComponent( ( value == null ) ? "" : value )
);

}

// Serialize the buffer and clean it up for transportation.
var source = buffer
.join( "&" )
.replace( /%20/g, "+" )
;

return( source );

}

}
);

Answer 3

The problem I had here came from a FileReader I opened earlier in my JS :

reader.readAsBinaryString($scope.file);
    reader.onload = function (e) {
       //stuff
    };

the readAsBinaryString function made the file_get_contents("php://input") unable to work correctly.

Once replaced with

    reader.readAsDataURL($scope.file);

every thing worked fine.

Thanks to Giulio for helping me to troubleshoot this.