Angularjs - Cannot pass parameter

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.

This looks it may be cross-domain did you enabled CORS? – Dalorzo Aug 16 '14 at 21:07 — Dalorzo, Aug 16 '14 at 21:07
still cant pass the parameter – Nurdin Aug 16 '14 at 21:09 — Nurdin, Aug 16 '14 at 21:09

score 1 · Accepted Answer · answered Sep 01 '14 at 05:01

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.

score 0 · Answer 2 · edited May 23 '17 at 11:58

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);
    }
});

Angularjs - Cannot pass parameter

2 Answers2