AngularJS - $http.post send data as json

Question

I'm working on autocomplete directive with angularjs but having some issues.

I have a form which have an autocomplete input. When i type something there, the term variable is sent as JSON:

enter image description here

But, when i use the same function (from different angular controller, but the same function) in another form the term variable sent perfectly and the autocomplete works fine:

enter image description here

Here is my angular function:

$scope.getCustomers = function (searchString) {
    return $http.post("/customer/data/autocomplete",
        {term: searchString})
        .then(function (response) {
            return response;
        });
};

What do you think is wrong?

Only relevant thing I noticed in the docs was "If the data property of the request configuration object contains an object, serialize it into JSON format." but if in the both places where you call getCustomers you are passing just a string, then I don't know why it would act differently. — Bemmu
– Bemmu, Commented Jul 3, 2014 at 4:52
Not sure why this is happening. Can you try the suggested answers here: stackoverflow.com/questions/17547227/… — vaidik
– vaidik, Commented Jul 3, 2014 at 4:55
You need to provide the HTML for the forms and the JavaScript that is actually calling this method. Otherwise, anything anyone says will just be a guess. I'm willing to bet you have a bug elsewhere. — Taylor Buchanan
– Taylor Buchanan, Commented Oct 17, 2014 at 2:22

Swapnil Dalvi · Accepted Answer · 2015-06-28 23:07:40Z

47

Use JSON.stringify() to wrap your json

var parameter = JSON.stringify({type:"user", username:user_email, password:user_password});
    $http.post(url, parameter).
    success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
        console.log(data);
      }).
      error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });

answered Jun 28, 2015 at 23:07

Swapnil Dalvi

1,03910 silver badges23 bronze badges

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

1 Comment

Nicholas Pesa Over a year ago

If I am referencing this parameter in server code, does it just get sent in the body of the request or is there some way to give the parameter a key so I can pick it up by a reference key in my server?

Adrian B. · Accepted Answer · 2014-07-16 09:13:45Z

18

Consider explicitly setting the header in the $http.post (I put application/json, as I am not sure which of the two versions in your example is the working one, but you can use application/x-www-form-urlencoded if it's the other one):

$http.post("/customer/data/autocomplete", {term: searchString}, {headers: {'Content-Type': 'application/json'} })
        .then(function (response) {
            return response;
        });

answered Jul 16, 2014 at 9:13

Adrian B.

1,6121 gold badge22 silver badges40 bronze badges

Comments

oneLeggedChicken · Accepted Answer · 2016-05-24 18:24:50Z

12

i think the most proper way is to use the same piece of code angular use when doing a "get" request using you $httpParamSerializer will have to inject it to your controller so you can simply do the following without having to use Jquery at all , $http.post(url,$httpParamSerializer({param:val}))

app.controller('ctrl',function($scope,$http,$httpParamSerializer){
  $http.post(url,$httpParamSerializer({param:val,secondParam:secondVal}));
}

answered May 24, 2016 at 18:24

oneLeggedChicken

3992 silver badges7 bronze badges

Collectives™ on Stack Overflow

AngularJS - $http.post send data as json

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related