calling a web service with multiple data using angular js

Question

I'm newer in angular js and I would like to call the web-service (implemented with Spring REST ) which use multiple data in his request body but i didn't now how the parsing can be done. Can someone help me please ?

This is my Spring method in controller:

@RequestMapping(value = "/addpost", method = RequestMethod.POST, headers = "Accept=application/json")
    public @ResponseBody String addpost(@RequestBody PostDto post, @RequestBody UserDto user) {
        postservice.addPost(post, user);
        return "post inserted";

    }

This is how i tried to call this method

$scope.addPost=function(x,y){

        $http.post('http://localhost:8080/wall/addpost',[x,y]).
          success(function(data, status, headers, config) {
              $scope.persons.push(data);
             $scope.user="";
             $scope.post="";
          }).
          error(function(data, status, headers, config) {
              alert("erreur");

          })

Pankaj Parkar · Answer 1 · 2015-02-26T15:24:54.820

1

If you look $http API, you will find that $http.post second parameter contain json of object which we want to post to the server. So that could {post: x, user: y} & then JSON.stringify() that json & pass it to server. sending array in data will won't be understand by your server side method.

Code

$scope.addPost = function(x, y) {

  $http.post('http://localhost:8080/wall/addpost', {
    post: x, //assuming x is post
    user: y //assuming y is use r
  }, headers: {
             'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
             }).
  success(function(data, status, headers, config) {
    $scope.persons.push(data);
    $scope.user = "";
    $scope.post = "";
  }).
  error(function(data, status, headers, config) {
    alert("erreur");
  })
}

Hope this could help you, Thanks.

edited Feb 26 '15 at 15:24

answered Feb 26 '15 at 14:33

Pankaj Parkar

134,766
23
234
299

What about the parsing from the object stringified from Json to tow objects post and users? it can be understable by jakson parser ? – housseminfo Feb 26 '15 at 14:38
@user3765224 there is something like it, then we can do. I don't aware of jakson parser because I'm from `.Net` background – Pankaj Parkar Feb 26 '15 at 14:40
Failed to load resource: the server responded with a status of 400 – housseminfo Feb 26 '15 at 14:49
try without `JSON.stringify()`. – Pankaj Parkar Feb 26 '15 at 14:50
You 1st part of code will look something like this `$http.post('http://localhost:8080/wall/addpost', { post: x, //assuming x is post user: y //assuming y is use r }).` – Pankaj Parkar Feb 26 '15 at 15:07
same response returned by the serve without JSON.stringify() – housseminfo Feb 26 '15 at 15:12

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

You need to send across the data using application/x-www-form-urlencoded.

$http({
    method: 'POST',
    url: 'http://localhost:8080/wall/addpost',
    data: $.param({post: x, user: y}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

See this answer for more details How can I post data as form data instead of a request payload?

Also your function definition should be

@RequestMapping(value = "/addpost", method = RequestMethod.POST, headers = "Accept=application/json")
    public @ResponseBody String addpost(@RequestParam PostDto post, @RequestParam UserDto user) {
        postservice.addPost(post, user);
        return "post inserted";

    }

edited May 23 '17 at 11:50

Community

1
1

answered Feb 26 '15 at 14:36

thedoctor

1,498
1
12
12

how can i do it in my case ? @thedoctor – housseminfo Feb 26 '15 at 15:04
$ is not defined should i inject it ? – housseminfo Feb 26 '15 at 15:48
Can you load a full version of jquery before loading angularjs, the $.param comes from jquery. – thedoctor Feb 26 '15 at 15:57
i downloaaded it the $.param work well now but still a problem HTTP code error 415 type not supported by the server – housseminfo Feb 26 '15 at 16:16
Have a look at the server logs to see if there was an exception, also see this answer to see if it's relevant http://stackoverflow.com/questions/21344352/json-plus-spring-mvc-3-2-error-415-unsupported-media-type. Also can you try and take off headers section on the annotation in your java code as you're not sending the overall request in JSON format. – thedoctor Feb 26 '15 at 16:25

score -1 · Answer 3 · answered Feb 26 '15 at 15:12

-1

AngularJS handles POST's differently than what you're probably used to (jQuery for example). One thing I do, is set up a default way for app's .config() to handle $http requests, by defaulting headers to application/x-www-form-urlencoded and also serializing objects before a request is made.

angular.module('yourApp', [])

    .config(['$httpProvider', function ($httpProvider) {

        // default header
        $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

        // using transformRequest this gets handled before each $http execution

        $httpProvider.defaults.transformRequest = function (data) {
            if (data === undefined) {
                return data;
            }

            return angular.isObject(data) && String(data) !== '[object File]' 
                ? $.param(data) // serialize it if it's an object
                : data;         // otherwise leave it alone
        };
    });

Now you'll be able to use it like you always do:

$http.post('url', { /* your data in an object */ });

answered Feb 26 '15 at 15:12

Mark Pieszak - Trilon.io

61,391
14
82
96

there is an error while compiling tthis statement $.param(data) : data; – housseminfo Feb 26 '15 at 15:21
Are you passing in data as an object? – Mark Pieszak - Trilon.io Feb 26 '15 at 15:28
I'd padssed the data as $http.post('http://localhost:8080/wall/addpost',{post: x, user: y}) – housseminfo Feb 26 '15 at 15:35
Why is there a semi-colon after your URL? – Mark Pieszak - Trilon.io Feb 26 '15 at 15:58
You might actually have to have jQuery included in your project, not sure if $.param is part of angularJS's jQuery-lite – Mark Pieszak - Trilon.io Feb 26 '15 at 16:10

calling a web service with multiple data using angular js

3 Answers3