Error while posting data from angular js form

Question

I have an angularJS form which posts data to a scalatra servlet. When the form gets submitted I can't get any form params in my scalatra servlet.

Below is my code

AngularJS

$scope.createUser = function() {
    $http.post('/createUser',{name:$scope.name,email:$scope.email,pwd:$scope.pwd}).
        success(function(data, status, headers, config) {
            alert("success " + data)
        }).
        error(function(data, status, headers, config) {
            alert("failure =>" +data)
        });
 };         });
 };     

HTML form

<form ng-controller="UserController">
            <legend>Create User</legend>

            <label>Name</label>
            <input type="text" id="name" name="name" ng-model="name" placeholder="User Name">

            <label>Email</label>
            <input type="text" id="email" name="email" 
                ng-model="email" placeholder="ur email here">

            <label>Password</label>
            <input type="text" id="pwd" name="pwd" 
                ng-model="pwd" placeholder="ur own pwd here">

            <button ng-click="createUser()" class="btn btn-primary">Register</button>
        </form>

Scalatra Servlet

post("/createUser") {
    println(params("name")) 
}

When I run the app and try to submit from the form I get this error

Error 500 key not found: name (obtained from firebug lite)

Please let me know if Iam missing something or anyother way to do this

Margarethe

Answer 1

Two changes:

1. Use the 'ng-submit' event.
2. Put the ng-models inside an object themselves so you can just send the object in the post.

HTML:

<div ng-controller="UserController">
  <form ng-submit="createUser()">
    <input type="text" ng-model="user.name">
    ...
    <input type="email" ng-model="user.email">
    ...
  </form>
</div>

JS:

function UserController($scope, $http) {
  $scope.user = {};
  $scope.createUser = function() {
    $http.post('/createUser', $scope.user);
  }
}

Dieball

thanks for the reply I have a question, is that my server side code should be made to accept post request as JSON – Margarethe

Answer 2

I just solved this by adding header information in the http post itself below is the code

$scope.createUser = function() {
$http({
method: 'POST',
url: '/createUser',
data: 'name=' + $scope.user.name + '&email=' +$scope.user.email,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

}

If anyone else have any other better approach please post your suggestions.

Margarethe

Answer 3

Well I also had similar problems, data was being posted to the server correctly but couldn't receive in the POST data with normal $_POST or $_REQUEST

However, following worked for me

$data = json_decode(file_get_contents("php://input"));

Ibidem

Answer 4

This will be late to answer. Anyway, I assume this will help someone else and therefore, I post my answer.

If you want to read the body of request when the request is submitted as POST , you may get it with the reader of HttpRequestas following.

      BufferedReader reader = request.getReader();
      String line = null;
      while ((line = reader.readLine()) != null)
      {
        sb.append(line);
      }

 String requestBody = sb.toString();

Hope this will helpful.

Harbourage