$http.post vs $.getJSON response?

Question

From an angular app, when I send a post request using jQuery as follows, ...

this.login = function (email, password) {
    return $.getJSON(FOO_URL, {
        email: email,
        password: password
    });
}

... my response is perfectly fine.

Object {result: "ok", key_one: result_one, key_two: result_two, ...}

However, when I try to do the same thing using angular's $http as follows, ...

this.login = function (email, password) {
    return $http.post(FOO_URL, {
        email: email,
        password: password
    });
}

... my response data is completely empty.

Object {data: "", status: 200, config: Object, statusText: "OK"}

Why is my response data empty with angular $http?

`$.getJSON` will **not** issue a `POST` request. It can only do `GET` — Phil, Oct 25 '16 at 04:02

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

jQuery's $.getJSON will not issue a POST request. It can only do GET.

To make it exactly the same, you'll want to pass the data as params...

$http.get(FOO_URL, {
    params: {
        email: email,
        password: password
    }
})

See https://docs.angularjs.org/api/ng/service/$http#usage

To send a POST request with data formatted as application/x-www-form-urlencoded which, if you're using PHP's $_REQUEST (or $_POST) you will need to do, see this answer ~ https://stackoverflow.com/a/30970229/283366

Short answer, inject $http and $httpParamSerializer and use

$http({
    method: 'POST',
    url: FOO_URL,
    data: $httpParamSerializer({email: email, password: password}),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})

edited May 23 '17 at 10:32

Community

1
1

answered Oct 25 '16 at 04:03

Phil

157,677
23
242
245

Unfortunately, $http.get is getting the same response. So it still doesn't work. – Grateful Oct 25 '16 at 04:08
@Grateful did you set the `params` object as in my answer? – Phil Oct 25 '16 at 04:08
oops... let me give that a go – Grateful Oct 25 '16 at 04:09
Awesome... It works!! Thank you for that @Phil... but, technically, shouldn't `post` work still?? From the server side, I am actually using `$_REQUEST` to retrieve data. So it should work. – Grateful Oct 25 '16 at 04:14
Would kindly explain, why `post` isn't working? Or do I have to add something similar to the keyword 'params' as well? – Grateful Oct 25 '16 at 04:20
@Grateful depends entirely on what your server is expecting. If it looks for `email` and `password` on the URL query string (which is appears to be doing), you use `GET` and `params`. If it can accept a `POST` request, you can use `data` instead but you would need to know if you need to send the data as JSON or `application/x-www-form-urlencoded` – Phil Oct 25 '16 at 04:24
Oh wait.. that may have something to do with this. I was previously getting a CORS related message that said ...'Content-Type' was not allowed. So I ended up adding `$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';` to my angular config. So you mean I need to switch back to `application/json`? – Grateful Oct 25 '16 at 04:26
@Grateful no, but you do need to tell Angular how to serialize the POST data. See my updated answer – Phil Oct 25 '16 at 04:27
Oh wow! That is amazing. @phil I can't thank you enough. It finally worked.. but would you say one is preferred over the other? GET vs ParamSerialized POST? Since the latter seems more complex. – Grateful Oct 25 '16 at 04:42
@Grateful you could always change your backend to accept JSON as that is the default for Angular. You would also need to add the content-type to your allowed CORS headers and be able to respond to `OPTIONS` requests. You could alternatively change the default POST request transformer to use the param serializer instead of the default `angular.toJson` – Phil Oct 25 '16 at 04:48
But I have my `Content-Type` to be `'application/x-www-form-urlencoded'`... shouldn't that already work? I mean, for me not to make my server accept JSON. Unless, I have misunderstood you... I thought changing `Content-Type` to `'application/x-www-form-urlencoded'` should have worked without all the serialization. – Grateful Oct 25 '16 at 04:51
1

Okay wait.. I think you mean to say that since angular default's to 'application/json', despite changing `Content-Type` to 'application/x-www-form-urlencoded' the actual data is still in the form of a json. Is that correct? So apart from changing `Content-Type` I would manually have to parameterize the data from json. – Grateful Oct 25 '16 at 04:56
@Grateful Yes. The `Content-Type` just tells your server what data type to expect from the client. In any case, this conversation is getting too complex for a StackOverflow comment thread. I suggest you read up on HTTP request types as well as [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) – Phil Oct 25 '16 at 04:57
Okay.. I have bothered you enough. @Phil you have been very helpful. Thanks. – Grateful Oct 25 '16 at 04:58

LegenJerry · Answer 2 · 2016-10-25T04:21:12.227

0

Those are two different http requests. One is getJSON is a GET method, and $http.post is a POST method.

this.login = function (email, password) {
    return $http.get(FOO_URL, {
        params: {
            email: email,
            password: password
        }
    });
}

edited Oct 25 '16 at 04:21

answered Oct 25 '16 at 04:04

LegenJerry

420
3
7

Thank you for that information. Unfortunatley, $http.get doesn't work either... since it gives me exactly the same response. – Grateful Oct 25 '16 at 04:07

$http.post vs $.getJSON response?

2 Answers2