提交登录与AngularJS

Question

我想避免使用<form>所以不是

<form action="./login" method="post"> 
    <input type="text" placeholder="Username" name="username"> &nbsp; 
    <input type="password" placeholder="Password" name="password"> 
    <input type="submit" value="Login"> 
</form> 

我想使用类似

<input type="text" placeholder="Nombre de usuario" data-ng-model="username"> 
<input type="password" placeholder="Contraseña" data-ng-model="password"> 
<a data-ng-click="doLogin()">Login</a> 

并在控制器：

$scope.doLogin=function(){ 
    var url = '/login?username=' + $scope.username + '&password=' + $scope.password; 
    $http.post(url).then(function(msg){ 
    console.log(msg); 
    });  
} 

的请求发送到Spring框架并在我使用表单时完美工作，但是当我使用Angular执行同样的动作时，它给了我一个错误POST http://localhost:8080/login?username=admin&password=admin 404 (Not Found)

我必须做什么改变？我希望具有完全相同的提交功能，就像错误凭证一样，Spring框架将我重定向到另一个视图。

Answer 1

我认为你不应该删除这个表单，而应该把它改成一个带有ngSubmit attribute的纯粹的angularjs表单（一定要删除action属性）。

像这样：

<form method="post" ng-submit="doLogin()"> 
    <input type="text" placeholder="Username" name="username"> &nbsp; 
    <input type="password" placeholder="Password" name="password"> 
    <input type="submit" value="Login"> 
</form> 

然后，在你的js控制，你的HTTP调用是一个后调用与方式通get调用的参数（参数1 =值1 &参数2 = ...），更改您的来电在post中传递登录参数。

$scope.doLogin=function(){ 
    var url = '/login'; 
    $http.post(url, {username: $scope.username, password: $scope.password}).then(function(msg){ 
    console.log(msg); 
    });  
} 

这样，您的angularjs窗体的行为方式与您以前的代码相同。