2016-06-28 175 views
1

我想從AngularJS v1.5.8發出HTTP請求,但它不起作用。HTTP請求與angularJS

我有叫我的login()函數簡單的HTML表單和一個提交按鈕:

<body ng-app="myApp" ng-controller="loginController"> 
...... 
...... 
...... 

<div 
class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-3 col-xs-6 col-xs-offset-3"> 
<button type="submit" class="btn btn-default" ng-submit="login()">Submit</button> 
</div> 

這是我loginController

var app = angular.module ("myApp", []); 
app.controller("loginController", function($scope, $http){ 

    $scope.username = ""; 
    $scope.password = ""; 

    $scope.login = function() { 

     $http(
       { 
        method : 'POST', 
        url : SessionService.getserverName()+'/RestServices/services/login/add', 
        headers : { 
         'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8' 
        }, 
        data : { 
         username : $scope.username, 
         password : $scope.password 
        } 
        }).success(function(response, status) { 
        if (response.result.success && status == 200) { 
        $log.info('OK'); 

        $location.path('/newPage.html'); 
      } 
     }) 
    } 
}); 

HTTP請求並沒有真正運行。

回答

-2

app.js

'use strict'; 
// Declare app level module which depends on filters, and services 
var app= angular.module('myApp', ['ngRoute','angularUtils.directives.dirPagination','ngLoadingSpinner']); 
app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'loginCtrl'}); 
    $routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'homeCtrl'}); 
    $routeProvider.when('/salesnew', {templateUrl: 'partials/salesnew.html', controller: 'salesnewCtrl'}); 
    $routeProvider.when('/salesview', {templateUrl: 'partials/salesview.html', controller: 'salesviewCtrl'}); 
    $routeProvider.when('/users', {templateUrl: 'partials/users.html', controller: 'usersCtrl'}); 
    $routeProvider.when('/forgot', {templateUrl: 'partials/forgot.html', controller: 'forgotCtrl'}); 


    $routeProvider.otherwise({redirectTo: '/login'}); 


}]); 


app.run(function($rootScope, $location, loginService){ 
    var routespermission=['/home']; //route that require login 
    var salesnew=['/salesnew']; 
    var salesview=['/salesview']; 
    var users=['/users']; 
    $rootScope.$on('$routeChangeStart', function(){ 
     if(routespermission.indexOf($location.path()) !=-1 
     || salesview.indexOf($location.path()) !=-1 
     || salesnew.indexOf($location.path()) !=-1 
     || users.indexOf($location.path()) !=-1) 
     { 
      var connected=loginService.islogged(); 
      connected.then(function(msg){ 
       if(!msg.data) 
       { 
        $location.path('/login'); 
       } 

      }); 
     } 
    }); 
}); 

loginServices.js

'use strict'; 
app.factory('loginService',function($http, $location, sessionService){ 
    return{ 
     login:function(data,scope){ 
      var $promise=$http.post('data/user.php',data); //send data to user.php 
      $promise.then(function(msg){ 
       var uid=msg.data; 
       if(uid){ 
        scope.msgtxt='Correct information'; 
        sessionService.set('uid',uid); 
        $location.path('/home'); 
       }   
       else { 
        scope.msgtxt='incorrect information'; 
        $location.path('/login'); 
       }     
      }); 
     }, 
     logout:function(){ 
      sessionService.destroy('uid'); 
      $location.path('/login'); 
     }, 
     islogged:function(){ 
      var $checkSessionServer=$http.post('data/check_session.php'); 
      return $checkSessionServer; 
      /* 
      if(sessionService.get('user')) return true; 
      else return false; 
      */ 
     } 
    } 

}); 

sessionServices.js

'use strict'; 

app.factory('sessionService', ['$http', function($http){ 
    return{ 
     set:function(key,value){ 
      return sessionStorage.setItem(key,value); 
     }, 
     get:function(key){ 
      return sessionStorage.getItem(key); 
     }, 
     destroy:function(key){ 
      $http.post('data/destroy_session.php'); 
      return sessionStorage.removeItem(key); 
     } 
    }; 
}]) 

loginCtrl.js

'use strict'; 

app.controller('loginCtrl', ['$scope','loginService', function ($scope,loginService) { 
    $scope.msgtxt=''; 
    $scope.login=function(data){ 
     loginService.login(data,$scope); //call login service 
    }; 

}]); 
+0

請向OP提供有關出錯的信息以及您如何解決問題的信息,以便他們能夠從中學習。 –

1

使用以下結構嘗試..

$http({ 
    url: 'put url here', 
    method: "put action here just like GET/POST", 
    data: { 'name': 'Rizwan Jamal' } 
}) 
.then(function (resp) { 
    //TODO: put success logic here 
}, 
function (resp) { 
    //TODO: put failed logic here 
} 

);

.then()方法在成功和失敗的情況下都會觸發。 then()方法接受兩個參數成功和一個錯誤回調,這個回調將被一個響應對象調用。

注: 如果你沒有使用表單驗證,所以請更改ng-submitng-click ..我希望這個解決方案會爲你工作:)

+0

它將是'application/json',但OP要'urlencoded' –