我不知道为什么 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(准备好了，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格式的字符串并保留我发送请求的页面（在上面的情况下，它保持“login.do”）。

我该怎么办？

编辑：index.html javascript 代码正在编辑，我添加了我的登录表单。

Answer 1

编辑：

将您的登录表单更改为

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

把js改成：

<script>

function submitForm(){

//your ajax code here

return false;

}

</script>

Answer 2

您的表单正在正常提交。阻止它然后调用ajax

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

        //ajax call and rest...
    })