AngularJS表單不會提交
[英]AngularJS form won't submit
問題描述
我有一個如下所示的簡單HTML表單，並且我正在使用Angular js（請參閱控制器。-表單未提交，由於某種原因，我無法讀取這些值。我在線檢查了Stack上的其他問題溢出，但沒有成功。任何指示或指導-我缺少什么？在此先感謝：
<!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="test@test.com" 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 = "test@test.com"; 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; }); });
謝謝
2 個解決方案
解決方案1
1 2017-09-22 16:32:14
我認為您為時過早關閉登錄功能括號。 調整它，然后重試。
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 = "test@test.com"; 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; }); }; });
解決方案2
0 已采納 2017-09-22 16:36:28
我對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="test@test.com" 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>
表格不會提交
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.