CODEWITHSUNDEEP
javascriptjqueryajaxangularjspost
whois42
whois42

Reputation: 186

Trouble in authorization with post request in Angular

I have a some problem with authorization in my app. I realize it through factory and controller, post method send request, but in response i have log from server, that values are wrong. But if I change body of doLogin function to jQuery ajax method and don't use factory, all is OK. What is wrong with my Angular way?

My AngularJS Code

Form:

<form ng-submit="doLogin(credentials)">
  <div class="list">
    <label class="item item-input">
      <span class="input-label">Username</span>
      <input type="text" ng-model="credentials.email">
    </label>
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password" ng-model="credentials.password">
    </label>
    <label class="item">
      <button class="button button-block button-positive" type="submit">Log in</button>
    </label>
  </div>
</form>

Factory:

.factory('Somepost', function ($http) {
  return{
doPost: function (credentials, callback) {
  console.log('service');
  console.log(credentials);
  return $http({
    url:'http://cronicls.ru/auth/login',
    method: 'POST',
    data: credentials,
    async : true
  }).success(callback);
}}})

Login function in controller:

$scope.doLogin = function(credentials) {
  var successCallback = function (data) {
    console.log(data);
  }
  Somepost.doPost(credentials, function(data) {
    console.log(data);
  });
};

Function doLogin with $.ajax (working successfully):

$scope.doLogin = function(credentials) {
  var successCallback = function (data) {
    console.log(data);
  }
  var login = function(credentials, successCallback) {
    $.ajax({
      type: "POST",
      url: 'http://cronicls.ru/auth/login',
      async : true,
      data: credentials,
      success: function(data){
        console.log('login success');
        console.log(data);
        successCallback();
      },
      error: function(data){
        console.log('/auth/login: error');
        console.log(data);
      }
    });
   };
   login(credentials, successCallback);
};

Upvotes: 0

Views: 83

Answers (2)

whois42
whois42

Reputation: 186

I found the answer of my problem. Thanks to @Jai for hint about ZF. Actually we need to wrap data in $.param(). So, working factory is:

.factory('Somepost', function ($http) {
  return{
    doPost: function (credentials, callback) {
      return $http({
        url:'http://cronicls.ru/auth/login',
        method: 'POST',
        data: $.param(credentials),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
     }).then(callback);
   }
  }
})

Upvotes: 0

Jai
Jai

Reputation: 74738

but in response i have log from server, that values are wrong.

Actually not, because it returns a promise and you have to do something like this in your callback:

As per your comment :

It's PHP with ZF on server side. Actually you need to change the default content Type header from application/json to application/x-www-form-urlencoded

Change in factory: 

.factory('Somepost', function ($http) {
  return{
    doPost: function (credentials, callback) {
    console.log('service');
    console.log(credentials);
    return $http({
      url:'http://cronicls.ru/auth/login',
      method: 'POST',
      data: credentials,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}, // <-- override the default contentType header
      async : true
    }).then(callback); // change to then instead of success
}}})

Upvotes: 1

Related Questions