如何使用角度js访问servlet中的表单数据

时间:2015-06-29 04:57:35

标签: javascript angularjs jsp servlets

我是棱角分明的新手。请帮我解决以下问题 我有一个带有控制器loginController的表单。我有两个文本框user.emailuser.password。 我想将数据发布到onclick按钮的servlet Log in。 我编写了以下代码,但是当我单击Log in时,数据不会发布到服务器上。此外,没有错误消息。

下面是我的JSP文件     `

<html ng-app="practiceApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel ="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
    <script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="practice.js"></script>
    <form name='login' ng-controller='loginController' ng-submit="login()">
        <div>
        {{hello}}
            <label>Email</label>
            <input type="email" name="email" ng-model="user.email" required/>
            <span ng-show='login.email.$dirty && login.email.$error.required'>Required</span>
            <span ng-show='login.email.$dirty && login.email.$error.email'>Not a valid email</span>
            <label>Password</label>
            <input type="password" name="password" ng-model="user.password" required/><br/>
            <span ng-show='login.password.$dirty && login.password.$error.required'>Required</span>
            <button ng-disabled="login.$invalid">Log in</button>
        </div>
    </form>
</body>
</html>

`

JavaScript文件

`

var app = angular.module('practiceApp',[]);
app.controller('loginController',function($scope,$http){
    $scope.login = function(){

        $http({
            method: 'POST',
            url:'/login',
            headers:{'Content-Type':'application/json'},
            data:$scope.user
        }).success(function(data){
            $scope.status=data;
        });
    }

});

` 我已经尝试了所有可用但无法找到任何结果的解决方案..请帮助解决这个问题

1 个答案:

答案 0 :(得分:0)

您的<button>不会导致表单提交。更改为<input type="submit" ng-disabled="login.$invalid">Log in</button>或从表单中删除ng-submit,然后将ng-click="login()"添加到<button>