我不知道為什么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>