2014-10-31 88 views
1

我一直在google搜索這幾個小時取消...

這裏是我的angularJS代碼:

var FrontControllers = angular.module('FrontControllers', []); 

FrontControllers.controller('LoginController', ['$scope', '$http', function($scope, $http){ 

    $scope.user = {}; 

    $scope.login = function() { 
     console.log($scope.user); 
     $http({ 
      url: '/webapi/login', 
      method: 'POST', 
      data: $scope.user 
     }).success(function (data) { 
      alert("success!"); 
     }).error(function(data) { 
      alert("failed =("); 
     }); 

    }; 
}]); 

這裏的附帶HTML

<div ng-controller="LoginController" id="login" class="box"> 

    <form novalidate role="form" action="/webapi/login" id="loginForm">     
     <label for="signin" class="sr-only">Email or Username</label> 
     <input ng-model="user.username" type="text" autofocus class="form-control input-lg" id="username" name="username" size="20" placeholder="email or username"> 

     <label for="password" class="sr-only">Password</label> 
     <input ng-model="user.password" type="password" class="form-control input-lg" id="password" name="password" size="10" placeholder="password"> 

     <button ng-click="login()" type="submit" class="btn btn-lg btn-bright btn-block">Login</button> 
    </form> 

</div> 

不管我做什麼,我最終都會收到取消POST請求。我以前使用標準的jQuery ajax代碼成功登錄到/ webapi/login。服務器配置爲AJAX,因此不需要urlencode標頭。 Payload看起來是正確的,與jQuery ajax發送的一樣。

可能是什麼問題?

這是Chrome開發者/網絡:

Provisional headers are shown 
Accept:application/json, text/plain, */* 
Content-Type:application/json;charset=UTF-8 
Origin:http://ec2-54-86-242-50.compute-1.amazonaws.com 
Referer:http://ec2-54-86-242-50.compute-1.amazonaws.com/ 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36 
X-DevTools-Emulate-Network-Conditions-Client-Id:BB96CDC3-AD63-D024-E814-4726DF4843D8 

回答

1

角不會preventDefault()如果action參數設置。請參閱here

因此,除非元素具有指定的操作屬性,否則Angular會阻止默認操作(將表單提交到服務器)。

你或許應該也對<form>而不是ng-click使用ng-submit="login(),這樣它會提交表單當用戶按下回車鍵

+0

謝謝!刪除操作參數。 (我可以真正吻你,我花了4個小時試圖讓愚蠢的表單工作。) – claireablani 2014-11-03 00:32:14

+0

謝謝奧斯汀! 我無法表達感受,但是當我從html頁面中刪除動作關鍵字時,它對我有用。 謝謝! :) – virsha 2016-07-08 11:55:47

0

嘗試刪除形式的

action="/webapi/login" 

和按鈕的

type="submit" 
+0

此工作過。我把其他回覆給了對號,因爲它是第一個。非常感謝! – claireablani 2014-11-03 00:34:11