Question

我正试图从后端服务器获取角度数据。我有一个java servlet，它根据html输入字段从数据库中获取数据并返回响应。

<!DOCTYPE html>
<html ng-app="myApp" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script>
            "use strict";
            var app = angular.module('myApp', []);

            app.controller('MainCtrl', function ($scope) {
                $scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"];
                $scope.submit = function ($event) {
                    if ($scope.myForm.$invalid) {
                        // Or some other update
                        $scope.myForm.$submitted = true;
                        $event.preventDefault();
                    }
                };
            });
            app.directive('uniqueUsername', function ($http) {
                return {
                    restrict: 'A',
                    require: 'ngModel',
                    link: function (scope, element, attrs, ngModel) {
                        element.bind('blur', function (e) {
                            ngModel.$setValidity('unique', true);

                            $http.post('CheckUserName.do', element.val()).success(function (data) {
                                if (data) {
                                    ngModel.$setValidity('unique', false);
                                }
                            });
                        });
                    }
                };
            });
        </script>
    </head>
    <body ng-controller="MainCtrl">
        <h2 class="text-muted">Registration form</h2>
        <div>
            <form name="myForm" action="RegistrationServlet.do" method="POST" novalidate>
                First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" unique-username="" placeholder="First Name" required/>
                <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span>
                <span style="color:red" class="error" ng-if="myForm.$submitted && myForm.uname.$error.required">Please fill field above<br></span><br/>
                <span style="color:red" class="hide-while-in-focus" ng-show="myForm.uname.$error.unique">Username already exist<br/></span>
                <button class="form-control btn btn-success" type="submit" ng-click="submit($event)">Submit</button>
            </form>
        </div>
    </body>
</html>

问题是request.getparameter("uname")始终返回null。现在我可以在chrome控制台中看到angularjs能够与servlet通信，但响应为null，因为传递的用户名为null。

这是java servlet代码：

public class CheckUserName extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        resp.setContentType("application/json");
        PrintWriter out = resp.getWriter();

        String username = req.getParameter("uname");
        System.out.println(username);

        try {
            Connection con = OracleDBConnection.getConnection();
            String selectQuery = "select FIRSTNAME from registration";
            Statement st = con.createStatement();
            ResultSet rs = st.executeQuery(selectQuery);

            while (rs.next()) {
                String firstName = rs.getString("FIRSTNAME");
                if (username.equalsIgnoreCase(firstName)) {
                    resp.getWriter().write("username already exist");
                    req.setAttribute("errMsg", "username already exist");
                    RequestDispatcher rd2 = req.getRequestDispatcher("/index4.jsp");
                    rd2.forward(req, resp);
                } else {
                    resp.getWriter().write("username available");
//                    req.setAttribute("errMsg", "");
//                    resp.sendRedirect("EmailConfirmation.jsp");
                }
            }
        } catch (Exception e) {
            System.out.println("DB related Error");
            e.printStackTrace();
        }
    }
}

Answer 1

$http.post()方法需要一个对象而不是字符串。尝试将代码更改为：

$http.post('CheckUserName.do', {
    data:  "uname=" + element.val()
}).success(function (data) {
    if (data) {
        ngModel.$setValidity('unique', false);
    }
});

Answer 2

您没有在post方法调用中指定请求参数名称：

   $http.post('CheckUserName.do', element.val()).success

您需要将以上行更改为：

    $http.post('CheckUserName.do',{uname:element.val()}).success

Answer 3

Try this,

        $http.post(url, {
         "uname": value
        }).
        success(function(data, status, headers, config) {
         //success
         }).
        error(function(data, status, headers, config) {
         //error
        });

The input you are passing to the service should be like this.

从角度js获取数据

3 个答案: