I don't know why JSON response can't forword ajax's call back but showing by browser and stay on the page where I send request

Question

I am making web application using AJAX and servlet, And now I'm making some login page.

Although servlet makes response as JSON, But this JSON Array only appear on browser, (it still stay on request url) not forward to ajax. below is my code.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>InfiniStorWeb</display-name>
  <context-param>
    <param-name>project</param-name>
    <param-value>InfiniStorWeb!</param-value>
  </context-param>
  <servlet>
    <servlet-name>other servlet</servlet-name>
    <servletother servlet class</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>login</servlet-name>
    <servlet-class>LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>other servlet</servlet-name>
    <url-pattern>*.ser</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>login</servlet-name>
    <url-pattern>/login.do</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

LoginServlet

    package kr.co.pspace.ifsrest.infiniweb;


@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String getResultList = null;
        JSONObject test = new JSONObject();
        System.out.println("request : " + request.getParameter("textAccount"));

        test.put("userid", "test");
        test.put("login", 1);
        test.put("messge", "EV_LOGIN_USER");
        test.put("focus", "");

        getResultList = new Gson().toJson(test);

        System.out.println("LOGIN : " + getResultList);

        /* It response as JSON */
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(getResultList);
    }
}

index.html

$(document).on(ready, function(){ $('#frameSet', parent.document).attr('rows', '0,*,0');

$('#formLogin').submit(function(e) {
    var sendData = $(this).serializeArray();
    var url = $(this).attr("action");

    $.ajax({
        type: "POST",
        url: url,
        data: sendData,
        dataType: "json",
        success:function(response, status, xhr) {
            if(response.login == 1) {
                $('#frameSet', parent.document).attr('rows', '42,*,56');
                $(location).attr("href", "./samples/index.html");
            } else {
                alert(response.message);
                eval("formLogin." + response.focus).focus();
            }
        },
        error: function(xhr, status, error) {
    alert("code:"+xhr.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error)
        }
    });

    alert("HI");
    e.preventDefault(); // STOP default action.
    // e.unbind(); // unbind. to stop multiple form submit. what ?
});

login form

<form id="formLogin" action="./login.do" method="POST">
    <div id="wrap" style="padding-top:30px;">
        <div style="width:350px; height:80px; font-family:Tahoma; font-size:35px; font-weight:bold; margin:0 auto;">
            Login Page!
        </div>
        <div style="width:350px; height:40px; margin:0 auto;">
            <div style="width:30px; float:left;">&nbsp;</div>
            <div style="font-family:Tahoma; font-size:15px; width:65px; float:left; margin-right:10px; text-align:left; padding-top:6px;">
                Username
            </div>
            <div style="font-size:15px; width:210px; float:left;">
                <input type="text" id="textAccount" name="textAccount" style="width:206px; height:26px;">
            </div>
        </div>
        <div style="width:350px; height:50px; margin:0 auto;">
            <div style="width:30px; float:left;">&nbsp;</div>
            <div style="font-family:Tahoma; font-size:15px; width:65px; float:left; margin-right:10px; text-align:left; padding-top:6px;">
                Password
            </div>
            <div style="font-size:15px; width:210px; float:left;">
                <input type="password" id="textPass" name="textPass" style="width:206px; height:26px;">
            </div>
        </div>
        <div style="width:280px; height:30px; margin:0 auto;">
            <div style="font-size:15px; width:210px; float:right; text-align:right; padding-right:0px;">
                <input id="submitSend" type="submit" value="Sing in" style="background:#DDDDDD; border:1px solid; height:24px;">
            </div>
        </div>
        <div style="width:450px; height:20px; margin:0 auto;">
        </div>
</form>

I expect success routine will be executed. But even error callback isn't called But browser show me only json formatted String and stay the page where I sent request (above case, It stays "login.do").

How should I do?

EDIT : index.html javascript code is edit, and i add my login form.

Answer 1

Your form is getting submitted normally. Prevent it and then call ajax

  $('#formLogin').submit(function(e) {
        e.preventDefault();//prevent form submit
        var sendData = $(this).serializeArray();
        var url = $(this).attr("action");

        //ajax call and rest...
    })

Answer 2

EDIT:

change your login form to

<form id="formLogin" onsubmit="return submitForm()" method="POST">
---------------------
---------------------
---------------------
</fomr>

change the js to:

<script>

function submitForm(){

//your ajax code here

return false;

}

</script>