I'm trying to implement JSON and AJAX to MVC design pattern through simple login page, but i'm having an error  

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>

```

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

```

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

```

What i'm trying to do is a login page that if the user didn't enter a proper USERNAME and PASSWORD an alert will appear.
What am i doing wrong? When i ever i run the project this is the result  

![Here is the result](https://i.stack.imgur.com/o71ce.png)

I'm just new to `AJAX` and `JSON`. For `JSON` i'm using `GSON` library