Form not posting properly in angular js

Question

I am having issues with format of angular app form post. Here is the html code for the form

                <form class="col s8 center">
                    <h4>
                        {{greeting}}
                    </h4>
                  <div class="row">
                    <div class="input-field col s12">
                      <input id="email" type="email" class="validate" ng-model="user.email">
                      <label for="email">Email</label>
                    </div>
                    <div class="input-field col s12">
                      <input id="password" type="password" class="validate" ng-model="user.password">
                      <label for="password">Password</label>
                    </div>
                  </div>
                  <div class="row">
                      <div class="col s12">
                        <input type="submit" class="waves-effect waves-light btn pink" style="width:100%" value="Login" ng-click="login(user)">
                      </div>
                  </div>
                </form>

here is the angular login function that i am using

$scope.login = function(user) {
  console.log(user.email);
  $http({
    url: baseDomain + 'auth/login/',
    method: "POST",
    data: user,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then(function(response) {
    $window.localStorage.token = response.data.token;
  }, function(response) {
    console.log(response);
  });
};

Now the function is being called properly but the post data is like

{"password":"d","email":"d@s"}:""

What is the corrct way to do the same and where am i going wrong ?

** Edit **

the post data is taken from firefox dev tool inspector.

I can't understand where is the problem. do you mean that your web api doesn't receive the request ? — Nadeem Khoury, Apr 23 '16 at 08:51
Its not in proper format. Look at the post data, what i want as key are username and password . The application is using `{"password":"d","email":"d@s"}` as key in whole — georoot, Apr 23 '16 at 08:52
so simply said $_POST["email"] is empty but the value is in $_POST['{"password":"d","email":"d@s"}'] — georoot, Apr 23 '16 at 08:53

score 1 · Accepted Answer · answered Apr 23 '16 at 08:53

1

You need to serialize data properly as "key=vale&key1=value2" string for this application/x-www-form-urlencoded content type. For this you can use built-in service $httpParamSerializer:

$http({
  url: baseDomain + 'auth/login/',
  method: "POST",
  data: $httpParamSerializer(user),
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

answered Apr 23 '16 at 08:53

dfsq

191,768
25
236
258

Yeah i tried last time, apparently need to wait sometime, will do it now :) – georoot Apr 23 '16 at 09:12

score 1 · Answer 2 · edited May 23 '17 at 12:31

I think you should refer to this solution:

https://stackoverflow.com/a/24964658/3351642

which state that

By default, the $http service will transform the outgoing request by serializing the data as JSON and then posting it with the content- type, "application/json". When we want to post the value as a FORM post, we need to change the serialization algorithm and post the data with the content-type, "application/x-www-form-urlencoded".

so you should do that:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: {username: $scope.userName, password: $scope.password}
}).success(function () {});

although i am pretty sure that this answer is correct, but i went with the one above because it is more efficient and i need to write less code. But anyways i will give you an upvote :D — georoot, Apr 23 '16 at 09:14

Form not posting properly in angular js

2 Answers2