我不知道为什么JSON响应无法预言ajax的回叫，而是由浏览器显示并停留在我发送请求的页面上

Question

我正在使用AJAX和servlet制作Web应用程序，现在正在制作一些登录页面。

尽管servlet以JSON形式进行响应，但是此JSON数组仅出现在浏览器中（它仍然保留在请求url上）而不转发给ajax。 下面是我的代码。

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 ?
});

登录表单

<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>

我希望将执行成功例程。 但是，即使错误回调也不被调用，但是浏览器仅向我显示json格式的String并保留我发送请求的页面（以上情况，保留为“ login.do”）。

我应该怎么做？

编辑：index.html javascript代码是编辑，并且我添加我的登录表单。

Answer 1

您的表格正常提交。 阻止它，然后调用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

编辑：

将您的登录表单更改为

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

将js更改为：

<script>

function submitForm(){

//your ajax code here

return false;

}

</script>