AngularJS表單不會提交

我有這個簡單的HTML表單，如下所示，我正在使用Angular js（請參閱控制器 - 表單沒有被提交，並且由於某些原因，我無法讀取值我在網上查和堆棧溢出等問題，但沒有成功的任何指針或指導 - 我失去了什麼在此先感謝：AngularJS表單不會提交

<!doctype html> 
 
<html ng-app="auth"> 
 
<head> 
 
    <title>Hello AngularJS</title> 
 
</head> 
 
<body> 
 
    <form method="post" ng-submit="login()" novalidate ng-controller="Login"> 
 
     DBID<input type="text" name="dbId" value="23" ng-model="dbId" /> 
 
     UserName<input type="text" name="username" value="[email protected]" ng-model="username" /> 
 
     Password<input type="text" name="password" value="test1234" ng-model="password" /> 
 
     <input type="submit" id="submit" value="login" /> 
 
     <pre>list={{list}}</pre> 
 
     <p>The Token is: {{token}}</p> 
 
    </form> 
 
    <script src="Scripts/angular.js"></script> 
 
    <script src="Scripts/login.js"></script> 
 
</body> 
 
</html>

這裏是我的AngularJS控制器：

？

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

 
    auth.controller('Login', function ($scope, $http) 
 
    { 
 
     $scope.login = function() 
 
     { 
 
      if ($scope.dbId) 
 
      { 
 
       $scope.list.push(this.dbId); 
 
       $scope.text = ''; 
 
      } 
 
     }; 
 

 
     var Credentials = new Object(); 
 
     Credentials.DBID = "23"; 
 
     Credentials.username = "[email protected]"; 
 
     Credentials.password = "test1234"; 
 

 
     $http({ 
 
      dataType: 'json', 
 
      method: 'POST', 
 
      url: 'http://localhost:55049/api/Security/Login', 
 
      data: Credentials, 
 
      headers: { 
 
       'Content-Type': 'application/json', 
 
       'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' 
 
      } 
 
     }).then(function (response) 
 
     { 
 
      $scope.token = response.data; 
 
     }); 
 
    });

感謝

來源

2017-09-22 CrystalLake62

我加了一些修改JavaScript代碼和它的正常工作。請看看並運行示例代碼以查看它的實際運行情況。此外，我更改了用戶名，DBID和密碼以便隨輸入值動態變化。

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

 
auth.controller('Login', function($scope, $http) { 
 

 
    $scope.list = []; 
 
    
 
    $scope.login = function() { 
 
    if ($scope.dbId) {  
 
     
 
     $scope.list.push(this.dbId); 
 
     $scope.text = ''; 
 

 
     var Credentials = new Object(); 
 
     Credentials.DBID = $scope.dbId; 
 
     Credentials.username = $scope.username; 
 
     Credentials.password = $scope.password; 
 
     
 
     alert("Posting your data: " + JSON.stringify(Credentials)); 
 

 
     $http({ 
 
     dataType: 'json', 
 
     method: 'POST', 
 
     url: 'http://localhost:55049/api/Security/Login', 
 
     data: Credentials, 
 
     headers: { 
 
      'Content-Type': 'application/json', 
 
      'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' 
 
     } 
 
     }).then(function(response) { 
 
     $scope.token = response.data; 
 
     }); 
 

 
    } else { 
 
     alert("Please add DBID"); 
 
    } 
 
    }; 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="auth" ng-controller="Login"> 
 

 

 
    <form method="post" ng-submit="login()" novalidate ng-controller="Login"> 
 
    DBID<input type="text" name="dbId" value="23" ng-model="dbId" /> UserName 
 
    <input type="text" name="username" value="[email protected]" ng-model="username" /> Password 
 
    <input type="text" name="password" value="test1234" ng-model="password" /> 
 
    <input type="submit" id="submit" value="login" /> 
 
    <pre>list={{list}}</pre> 
 
    <p>The Token is: {{token}}</p> 
 
    </form> 
 

 

 
</div>

來源

2017-09-22 16:36:28 Thusitha

非常感謝！它正在工作！ – CrystalLake62

我覺得你是太早關閉登錄功能支柱。調整它，然後再試一次。

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

 
    auth.controller('Login', function ($scope, $http) 
 
    { 
 
     $scope.login = function() 
 
     { 
 
      if ($scope.dbId) 
 
      { 
 
       $scope.list.push(this.dbId); 
 
       $scope.text = ''; 
 
      } 
 
     
 

 
     var Credentials = new Object(); 
 
     Credentials.DBID = "23"; 
 
     Credentials.username = "[email protected]"; 
 
     Credentials.password = "test1234"; 
 

 
     $http({ 
 
      dataType: 'json', 
 
      method: 'POST', 
 
      url: 'http://localhost:55049/api/Security/Login', 
 
      data: Credentials, 
 
      headers: { 
 
       'Content-Type': 'application/json', 
 
       'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' 
 
      } 
 
     }).then(function (response) 
 
     { 
 
      $scope.token = response.data; 
 
     }); 
 
    }; 
 
    });

來源

2017-09-22 16:32:14

你可能是正確的。我試過你的新.js，表單仍然不會提交。點擊按鈕什麼也不做。很奇怪。我是AngularJS的新手，所以它可能是簡單的我做錯了。 – CrystalLake62

AngularJS表單不會提交

回答

相關問題