0

I'm trying to call a POST request (using Jersey APi for REST) from an HTML form using AngularJS v 1.5.8.
I have an HTML form with a submit button that calls a REST serivce:

<body ng-app="myApp" ng-controller="loginController">
......
<form name="myForm" nonvalidate ng-submit="login()">

......

<div
class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-3 col-xs-6 col-xs-offset-3">
<button type="submit" class="btn btn-default" ng-submit="login()">Submit</button>
</div>
</form>

This is my loginController script:

var app = angular.module ("myApp", []);
app.controller("loginController", function($scope, $http){

    $scope.username = "";
    $scope.password = "";

    $scope.login = function() {

        var transform = function(data) {
            return $.param(data);
        }

        $http(
                {

                    url : 'http://localhost:8080/RestServices/services/user/add',
                    method : 'POST',
                    headers : {
                        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
                    },

                    transformRequest : function(data) {
                        return $.param(data);
                    },
                    data: { name:     $scope.username,
                            password: $scope.password }

                }).success(function(response, status) {
                    $scope.data = response; //Assign data received to $scope.data
                }
                )
    }
}
)

And here is my simple REST post service:

@Path("user")
public class UserResource {

    private TreeMap<Integer, User> userMap = new TreeMap<Integer, User>();


    @POST
    @Path("add")
    @Consumes({MediaType.APPLICATION_JSON})

    public Response addUser(User user) {

        int id = userMap.size();
        user.setId(id);
        userMap.put(id, user);

        ObjectMapper mapper = new ObjectMapper();
        String jsonString = "";
        try {
            jsonString = mapper.writeValueAsString(user);
        } catch (JsonProcessingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            jsonString = null;
        }

        return Response.ok().entity(jsonString).build();

    }

}

The POST request is called but returns a 415 error: the server refused this request because the request entity is in a format not supported by the requested resource for the requested method.

harry-potter
  • 1,981
  • 5
  • 29
  • 55
  • 3
    I think you have a problem in angular JS Header part. You have written content type = "application/x-www-form-urlencoded" and sending a data in JSON and your web service also expects JSON. You should change content type of angularJS to JSON – rahul Jun 28 '16 at 12:15
  • I have tried to set content-type : `{ 'Content-Type': 'application/json;charset=utf-8'}` but it doesn't work. I have the same 415 error. – harry-potter Jun 28 '16 at 12:21
  • Could you please remove charset=utf-8 from the request. See answer to the post http://stackoverflow.com/questions/22566433/http-415-unsupported-media-type-error-with-json – dasrohith Jun 28 '16 at 13:52

2 Answers2

0

The problem is with the format that the REST API is expecting i.e. JSON. So try with application/json and specifying charset won't be required:

headers: {
    'Content-Type' : 'application/json' 
}
SirFartALot
  • 1,215
  • 5
  • 25
-1
function loginController($scope, $http) {
$scope.username = "";
$scope.password  = "";

$scope.login  = function () {

    $http({
        method: 'POST',
        url: 'user/add',
        data: {
            username: $scope.username,
            password: $scope.password
        }
    }).success(function (data, status, headers, config) {

        $scope.result =data.username;
        alert($scope.result);
    }).error(function (data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
}

}

Vaibs
  • 1,546
  • 9
  • 31