$ http.JSONP()在离子应用程序

时间:2015-08-04 10:03:52

标签: javascript angularjs http ionic-framework jsonp

我在AngularJS上使用Ionic FrameworkCordova / PhoneGap构建的移动应用程序出错。

它连接到我们的服务器并检查usernamepassword。 如果21有效,它将返回username/password;如果-22格式无效,则返回JSONP。 如果请求失败,则$http请求具有错误处理程序,该错误处理程序将打印出错误代码。 $http错误的状态和用户告诉我他们收到404错误。

这是controller.js的代码

.controller('SignInCtrl', function ($scope, $state, $ionicLoading, $ionicPopup, $ionicViewService, $Authentication) {

  $scope.signin = function (user) {
    $Authentication.signin(user.email, user.password);
    $ionicLoading.show({
      template: 'Connexion...'
    });
  };
  // listen for the event in the relevant $scope
  $scope.$on('event:signin-success', function() {
    $ionicLoading.hide();
    $ionicViewService.nextViewOptions({
      disableBack: true
    });
    $state.go('tab.regular', {url: '/regular'};
  });

  $scope.$on('event:signin-error', function() {
    $ionicLoading.hide();
    var alertPopup = $ionicPopup.alert({
      title: 'Oops!',
      template: 'Votre email ou mot de passe est invalide. Essayez à nouveau.',
      okText: 'OK'
    });
    alertPopup.then(function(res) {
    });
  });

  $scope.$on('event:signin-failure', function() {
    $ionicLoading.hide();
    var alertPopup = $ionicPopup.alert({
      title: 'Oops!',
      template: 'Pas de connexion internet. Connectez-vous à internet et essayez à nouveau.',
      okText: 'OK'
    });
    alertPopup.then(function(res) {
    });
  });
})

这是service.js的代码

.factory('$Authentication', function($http, $rootScope) {

  var login_url    = 'http://../signin';
  var user;

  if (localStorage.user) {
    user = JSON.parse(localStorage.getItem('user'));
  }

  return {
    USER: user,

    signin: function (email , password) {
      console.log('Signing in...');`enter code here`

      $http.jsonp(login_url, {params: {email: email, password: password, callback: 'JSON_CALLBACK'}})
      .success(function (data, status, headers, config) {`enter code here`
        if (data.status > 0) {
          console.log('Sign in: Success');
          localStorage.setItem('user', JSON.stringify(user));
          // firing an event downwards
          $rootScope.$broadcast('event:signin-success');
        }
        else {
          console.log('Sign in: Error');
          $rootScope.$broadcast('event:signin-error');
        }
      })
      .error(function (data, status, headers, config) {
        console.log('Sign in: Failure');
        $rootScope.$broadcast('event:signin-failure');
      });
    },

  };
})

以下是signin.html的代码

<ion-view  hide-nav-bar="true" >
   <ion-content class="padding">

     <div class=" card padding" >

      <p><center>
       <img src="img/dig1.png" style="margin-top:5%;">
       </center> </p><p>

        <label class="item item-input">  
          <i class="icon ion-ios7-email placeholder-icon"></i>
            <input type="text" placeholder="Enter your email adresse" ng-model="user.email">
        </label>

        <label class="item item-input">
          <i class="icon ion-locked placeholder-icon"></i>
            <input type="password"  placeholder="Enter your password" ng-model="user.password">
        </label>

        <label class="item">
          <button  class="button button-block icon-left ion-log-in button-positive" ng-click="signin(user)"> 
                &nbsp;&nbsp;Sign In
          </button>
       </div> 

  </ion-content>
</ion-view>

我需要帮助。你能指出代码中我做错了吗?

1 个答案:

答案 0 :(得分:0)

当您使用$http.jsonp时,它会向服务器发出GET个请求。但您的登录服务使用POST请求。您无法使用POST

提出$http.jsonp请求

您必须使用$http.postXMLHttpRequest发布数据。

$http({
  url: login_url,
  method: "POST",
  withCredentials:true,
  data: {email: email, password: password, callback: 'JSON_CALLBACK'}
}).success(function(data, status, headers, config) {
    if (data.status > 0) {
      console.log('Sign in: Success');
      localStorage.setItem('user', JSON.stringify(user));
      // firing an event downwards
      $rootScope.$broadcast('event:signin-success');
    }
    else {
      console.log('Sign in: Error');
      $rootScope.$broadcast('event:signin-error');
    }
}).error(function(data, status, headers, config) {
    console.log('Sign in: Failure');
    $rootScope.$broadcast('event:signin-failure');
});