Angularjs - Cannot pass parameter - php

Question

I'm using Angularjs for my mobile app project. My problem is I can't pass my all my parameters to my own API. My API can't detect any post parameters that my app send to it.
$http.post("http://xxxxxxxx/api/verify_login.php", {
"username": "admin",
"password": "12345678",
"secret_key": "123456789"
}).success(function(data, status, headers, config) {
alert(JSON.stringify(data));
}).error(function(data, status, headers, config) {
alert(JSON.stringify(status));
});
If using Postman it works.

Answer 1

how about this :
var postData = '{"username":"'+varUsername+'", "password" : "'+varPassword+'", "secret_key" : "'+varSecretyKey+'"}';
$http({
method: 'POST',
url: 'http://xxxxxxxx/api/verify_login.php',
data: postData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response) {
$scope.result = response;
alert(JSON.stringify(data));
});
This will post data as :
username=hisname&password=hispassword&secret_key=hiskey
keep in mind that, angularjs will automatically convert your postdata as JSON.

Answer 2

Looks like this StackOverflow answer helps solve half the problem. Look at the accepted answer. To paraphase the quote on this post:
By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.
There is a nice way to get it do this - override the default transformRequest - this is show in a nice post by Ben Nadel here - Here's a snippet:
var request = $http({
method: "post",
url: "process.cfm",
transformRequest: transformRequestAsFormPost,
data: {
id: 4,
name: "Kim",
status: "Best Friend"
}
});
He has a fairly simple implementation - if you find that this doesn't work for you, you can use the a detailed version here - you can inject this factory in your controller.
.factory("transformRequestAsFormPost", function() {
function transformRequest(data, getHeaders) {
var headers = getHeaders();
headers["Content-type"] =
"application/x-www-form-urlencoded; charset=utf-8";
return (serializeData(data));
}
return (transformRequest);
function serializeData(data) {
if (!angular.isObject(data)) {
return ((data === null) ? "" : data.toString());
}
var buffer = [];
for (var name in data) {
if (!data.hasOwnProperty(name)) {
continue;
}
var value = data[name];
buffer.push(encodeURIComponent(name) + "=" + encodeURIComponent((value ===
null) ? "" : value));
}
var source = buffer.join("&").replace(/%20/g, "+");
return (source);
}
});