title: Browser tries to save JSON response to AJAX request instead of processing it
body: <p>I'm trying to implement JSON and AJAX to MVC design pattern through simple login page, but i'm having an error<br>
  <br>
  Here's my Login.jsp <code>(View)</code> :<br></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Login Test Page&lt;/title&gt;
  &lt;script src="../js/jquery-1.10.1.min.js" &gt;&lt;/script&gt;
  &lt;script src="../js/data_handler.js" &gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form action="LoginController" method="post" id="loginForm"&gt;
          &lt;!-- Login body --&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;label for="userName"&gt;Username:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="userName" id="userName" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;label for="password"&gt;Password:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="password" name="password" id="password" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="submit" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;hr /&gt;
          &lt;p id="displayName" /&gt; 
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my LoginController <code>(Controller)</code>:</p>
  
  <pre><code> protected void doPost( HttpServletRequest request, HttpServletResponse response ) throws ServletException,
          IOException
      {
          Map&lt;String, Object&gt; map = new HashMap&lt;String, Object&gt;(); // 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&lt;String, Object&gt; map ) throws IOException
      {
          response.setContentType( "application/json" );
          response.setCharacterEncoding( "UTF-8" );
          response.getWriter().write( new Gson().toJson( map ) );
      }
  </code></pre>
  
  <p>Here's the data_handler.js <code>(AJAX)</code>:</p>
  
  <pre><code>$(document).ready(function(){
      $('#loginForm').submit(function(){
          $.ajax({
              url: 'LoginController',
              type: 'POST',
              dataType: 'json',
              data: $('loginForm').serialize(),
              success: function(data){
                  alert("hello");
              }
          });
          return false;
      });         
  });
  </code></pre>
  
  <p>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<br>
  <img src="https://i.stack.imgur.com/o71ce.png" alt="Here is the result"></p>
  
  <p>I'm just new to <code>AJAX</code> and <code>JSON</code>. For <code>JSON</code> i'm using <code>GSON</code> library</p>