AngularJs post request getting error

Question

I am trying to do a POST request to a login api through angular js .

<form method="post" ng-submit="doLogin()">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" ng-model="loginData.user_mail">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit" >{{loginTxt}}</button>
        </label>
      </div>
      </form>

Controller.js

$scope.doLogin=function(){
     $http({
          method  : 'POST',
          url     : 'http://examplemns.com/customer/api/v1/login/login',
          data    : $scope.loginData, //forms user object
          timeout:20000
         })
         .success(function(response){
             
              alert(JSON.stringify(response));
           })
           .error(function(err){
                console.log(JSON.stringify(err));
                alert("Network error");
                
             });
         }

But i will get invalid username response even if the username and password is correct. I checked the api through postman plugin its working fine,but when comes with angular i will get invalid.

Here is the sample input

user_mail:[email protected]
password:123456

When try this input with postman plugin i will get the correct response

{
  "status": 1,
  "message": "Done",
  "data": {
    "name": "A.V.M TOURIST HOME",
    "username": "[email protected]",
    "id": "37",
    "key": "cos4ok88woo0kcw40cog0s4gg4skogscso8848ok"
  }
}

but when trying through the angularjs post i with the same input i will get this response

{"status":0,"message":"Invalid username"}

Please help me:(

UPDATE

I need to transform my data to application/x-www-form-urlencoded rather than json (from comments) for that i am used this way.

var data= {user_mail:$scope.loginData.user_mail,password:$scope.loginData.password};
$http({
              method  : 'POST',
              url     : 'http://examplemns.com/customer/api/v1/login/login',
              data    : data, 
              timeout:20000
             })
             .success(function(response){
                 
                  alert(JSON.stringify(response));
               })
               .error(function(err){
                    console.log(JSON.stringify(err));
                    alert("Network error");
                    
                 });

But again i will get the same

Screenshot of request and response from the postman

can you show us either a screenshot or the textual version of your postman request ? — sam
– sam, Commented May 18, 2016 at 15:37
you can get the textual version by clicking on 'generate' at the top right of postman window — sam
– sam, Commented May 18, 2016 at 15:38
The response from the postman is already included in my question — Blessan Kurien
– Blessan Kurien, Commented May 18, 2016 at 15:38

Wasiq Muhammad · Accepted Answer · 2016-05-19 06:19:11Z

1

Try this

    $scope.loginData = {};
    $scope.doLogin=function(){

         $http({
              method  : 'POST',
              url     : 'http://examplemns.com/customer/api/v1/login/login',
              data    : $scope.loginData, //forms user object ,
              headers: {'Content-Type': 'application/x-www-form-urlencoded'}

             })
             .success(function(response){
                  console.log(response);
             })
             .error(function(err){
                    console.log(err);
              });
            }

OR

$scope.loginData = {};
var data = $scope.loginData;
$http.post('/examplemns.com/customer/api/v1/login/login', data).then(successCallback, errorCallback);

ALSO TRY THIS

  <input type="text" ng-model="user_mail">
  <input type="password" ng-model="password">

  var data = {};
  data.user_mail = $scope.user_mail;
  data.password = $scope.password;

  $http.post('/examplemns.com/customer/api/v1/login/login',   data).then(successCallback, errorCallback);

edited May 19, 2016 at 6:19

answered May 18, 2016 at 15:41

Wasiq Muhammad

3,1483 gold badges19 silver badges30 bronze badges

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

8 Comments

sam Over a year ago

He needs to set as Form data instead of simple JSON object

Blessan Kurien Over a year ago

{"data":{"status":0,"message":"Invalid Username."},"status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"url":"http://smaplessss,com/customer/api/v1/login/login","data":{"user_mail":"[email protected]","password":"123456"},"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"}},"statusText":"OK"}

Blessan Kurien Over a year ago

I will get this on successcallback

Wasiq Muhammad Over a year ago

you receive on sucesscalback??have your request url server is working?

sam Over a year ago

yes we really need the postman request to compare with the angular config

|

DeclanMcD · Accepted Answer · 2016-05-19 07:52:17Z

0

Try changing the following line:

data    : $scope.loginData, //forms user object

to:

data    : JSON.stringify($scope.loginData), //forms user object

answered May 19, 2016 at 7:52

DeclanMcD

1,5864 gold badges23 silver badges41 bronze badges

Collectives™ on Stack Overflow

AngularJs post request getting error

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related