Angular JS $http post with get params in URL

Question

I am having trouble with posting to a URL with GET parameters using Angular's $http.

URL: http://localhost/api/?r=page/product

Now I have to post data to this URL via AJAX. When I try it with the following code it doesn't work.

$http({ url:'api/?r=page/product', method:'post', params:{ price:$scope.price }, });

Where as the same in jQuery Works flawlessly.

$.ajax({ url:'api/?r=page/product', method:'post', data:{ price:$scope.price } });

What should I add to make it work?

Regards

could you try specifying header in the $http option headers: {'Content-Type': 'application/x-www-form-urlencoded'} — Pankaj Parkar
– Pankaj Parkar, Commented Aug 6, 2015 at 20:27
@PankajParkar sir I suppose the default header will be set to application/x-www-form-urlencoded if we donn't set any header with the request. Is it wrong sir ? — Vineet
– Vineet, Commented Aug 6, 2015 at 20:31
@PankajParkar You are right its not url-encoded its json object — echo_salik
– echo_salik, Commented Aug 7, 2015 at 7:14
@echo_salik it works without header OR you requires to add it? — Pankaj Parkar
– Pankaj Parkar, Commented Aug 7, 2015 at 7:16

alek kowalczyk · Accepted Answer · 2015-08-06 20:27:53Z

2

Try:

$http({ url:'/api', method:'post', params: { r: 'page/product' }, data:{ price:$scope.price }, });

you mixed up params with data, params are the query parameters added to the url, data is the data being sent in the request

answered Aug 6, 2015 at 20:27

5,0043 gold badges29 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

still going to generate the same url. Don't see how this changes anything

he has put the data ($scope.params) to the params, that is why the behavior is different to the one from jQuery

@alekkowalczyk Thanks it does the trick... but the data being sent is not what a normal post looks like. Its like a JSON object.

@alekkowalczyk nice catch