Question

我正在尝试通过简单的登录页面实现JSON和AJAX到MVC设计模式，但我遇到了错误

这是我的Login.jsp (View)：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Test Page</title>
<script src="../js/jquery-1.10.1.min.js" ></script>
<script src="../js/data_handler.js" ></script>
</head>
<body>
    <form action="LoginController" method="post" id="loginForm">
        <!-- Login body -->
        <table>
            <tr>
                <td><label for="userName">Username:</label></td>
                <td><input type="text" name="userName" id="userName" /></td>
            </tr>
            <tr>
                <td><label for="password">Password:</label></td>
                <td><input type="password" name="password" id="password" /></td>
            </tr>
            <tr>
                <td><input type="submit" /></td>
            </tr>
        </table>
        <hr />
        <p id="displayName" /> 
    </form>
</body>
</html>

这是我的LoginController (Controller)：

 protected void doPost( HttpServletRequest request, HttpServletResponse response ) throws ServletException,
        IOException
    {
        Map<String, Object> map = new HashMap<String, Object>(); // variable that will hold data to be parsed to JSON

        UserDAO userDAO = new UserDAO(); // instantiate database

        String userName = request.getParameter( "userName" ); // get userName String from the Login.jsp
        String password = request.getParameter( "password" ); // get password String from the Login.jsp
        boolean isValid = userDAO.authenticate( userName, password );
        map.put( "isValid", isValid );
        if( isValid ) // validate userName and password
        {

            UserModel userModel = userDAO.getUserDetails( userName ); // get userModel that correspond to userName parameter

            request.getSession().setAttribute( "userName", userName ); // set SESSION REQUEST to be forward to MainPage.jsp
            request.setAttribute( "userDetails", userModel ); // set REQUEST to be forward to MainPage.jsp

            RequestDispatcher rd = request.getRequestDispatcher( "MainPage.jsp" );
            rd.forward( request, response ); // forward request to MainPage.jsp
            return;
        }
        else
        {
            map.put( "userName", userName );
            write( response, map );
        }
    }

    /**
     * @param response
     * @param map contains data to parse to JSON
     * @throws IOException
     */
    private void write( HttpServletResponse response, Map<String, Object> map ) throws IOException
    {
        response.setContentType( "application/json" );
        response.setCharacterEncoding( "UTF-8" );
        response.getWriter().write( new Gson().toJson( map ) );
    }

这是data_handler.js (AJAX)：

$(document).ready(function(){
    $('#loginForm').submit(function(){
        $.ajax({
            url: 'LoginController',
            type: 'POST',
            dataType: 'json',
            data: $('loginForm').serialize(),
            success: function(data){
                alert("hello");
            }
        });
        return false;
    });         
});

我要做的是一个登录页面，如果用户没有输入正确的USERNAME和PASSWORD，则会出现一个警告。我究竟做错了什么？当我运行项目时，这就是结果 Here is the result

我刚接触AJAX和JSON。对于JSON我正在使用GSON库

Answer 1

正如您在对话框中看到的那样，文件类型为“未知文件类型”。

在您的代码中，我可以看到您设置了内容类型：

response.setContentType( "application/json" );

并且在开始编写响应数据之前就已经这样做了。

乍一看，这应该可行，但不知何故，对setContentType的调用无效。

转到浏览器的调试工具并查看响应标头。您可以在其中找到一行Content Type，如下所示：

Content-Type: application/json

如果缺少该行，请在response.setContentType()行中设置断点并查看响应。那里应该有一条小溪。确保流仍为空。

Answer 2

如果登录成功或失败，您没有提到错误，但是您编写代码的方式如果登录成功则触发 if（isValid）< / strong>检查哪些结果会将请求转发到 MainPage.jsp 。

因为您从javascript AJAX帖子调用了调用，如果servlet转发到 MainPage.jsp ，可能发生的事情是您的AJAX帖子正在获取该JSP的处理结果，不是你认为发送的地图。内容类型可能未被 MainPage.jsp 设置为 application / json 。

下次发生时，实际保存返回的文件并查看它以查看内容是什么。

浏览器尝试将JSON响应保存到AJAX请求而不是处理它

2 个答案: