1

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

Here's my 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;
    });         
});

我想要做的是一个登录页面，如果用户没有输入正确的用户名和密码，则会出现警报。我究竟做错了什么？当我运行该项目时，这就是结果
这是结果

我只是新手AJAX和JSON。因为JSON我正在使用GSON图书馆

4

2 回答 2

0

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

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

response.setContentType( "application/json" );

并且您在开始写入响应数据之前执行此操作。

乍一看，这应该有效，但不知何故，调用setContentType无效。

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

Content-Type: application/json

如果该行丢失，请在该行中设置一个断点response.setContentType()并查看响应。那里应该有一条溪流。确保该流仍然是空的。

于 2013-08-27T13:12:56.750 回答
0

你没有提到如果登录成功或失败你是否看到错误，但是你编写代码的方式，如果登录成功，你会触发你的if(isValid)检查，这会导致转发对MainPage.jsp的请求。

因为您从 javascript AJAX 帖子调用了调用，所以如果 servlet 确实转发到MainPage.jsp，那么可能发生的情况是您的 AJAX 帖子正在取回该 JSP 的处理结果，而不是您认为要发送的地图。并且MainPage.jsp可能没有将内容类型设置为application/json。

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

于 2013-08-27T13:42:26.643 回答