为什么我不能处理从 $.ajax 返回的 HTTP 状态代码？

Question

我有下一个适用于 Google App Engine 的 JSP 页面：

<%@ page contentType="text/html; charset=windows-1251" language="java" %>
<%@ page import="com.wedding.Register" %>

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        function submitMyForm(button) {
            var myForm = $(button).closest('form');
            $.ajax({
                url: $(myForm).attr('action'),
                type: "post",
                contentType:attr("enctype", "multipart/form-data"),
                data: $(myForm).serialize(),
                statusCode: {
                    400: function () {
                        $('.form-inline').after("<h1>400!</h1>");
                    },
                    200: function () {
                        $('.form-inline').after("<h1>200!</h1>");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div class="container">

    <% 
        String companyName = Register.getLoggedInCompanyName(request);
        if (companyName == null) {
    %>

        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Menu</a>
            <ul class="nav">
              <li><a href="/">Home</a></li>
              <li class="active"><a href="/reg.jsp">Register</a></li>
            </ul>
          </div>
        </div>

        <div class="hero-unit">
            <h1>Login</h1>
            <p>Enter login credentials</p>
            <p>
                  <form action="/reg?action=login" class="form-inline" method="post" enctype="multipart/form-data">
                      <input type="text" name="email" class="input-xlarge" placeholder="">
                      <input type="password" name="password" class="input-xlarge" placeholder="">
                      <button type="submit" class="btn" onClick="submitMyForm(this)">Login</button>
                  </form>
            </p>
        </div>

    <% 
        } else {
    %>

        <div class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="#">Menu</a>
            <ul class="nav">
              <li><a href="/">Home</a></li>
              <li class="active"><a href="/reg?action=logout">Logout</a></li>
            </ul>
          </div>
        </div>

        <div class="hero-unit">
            <h1>Error</h1>
            <p>Error.</p>
        </div>

    <% 
        }
    %>

    </div>

    <div id="footer">
        <div class="container">
            <p class="muted credit"></p>
        </div>
    </div>  
</body>

问题是，当单击按钮时，表单被发送到服务器，但如果服务器返回 400 HTTP 状态代码

$('.form-inline').after("<h1>400!</h1>");

不被调用。

我也尝试过成功/错误功能和其他 HTTP 代码，但没有成功。 有趣的是，它工作一次，然后总是失败。 浏览器被重定向到生成的错误页面，而不是向 HTML 添加新元素。

使用返回状态代码

HttpServletResponse.sendError(400);

我已经检查过是否发送了正确的请求和响应。 我还检查了最新的 jquery 是否已链接。

Answer 1

默认情况下，包含在<form/>中的<button/>提交它。 因此，您需要停止表单提交。

在下面的例子中，我将坚持使用 jQuery 而不是 JavaScript 和 jQuery 的混合。

/* Bind the submit event */
$("form").submit(function() {
  /* Request an HTTP 400 */
  $.ajax({
    url: "http://httpstat.us/400",
    statusCode: {
      400: function() {
        console.log("HTTP 400 received");
      }
    }
  });
  /* stop the form submission */
  return false;
});​

<form action="/reg?action=login" class="form-inline" method="post" enctype="multipart/form-data">
  ...
  <button type="submit" class="btn">Login</button>
  ...
</form>

由于$.ajax是异步执行的，如果您不停止表单提交，浏览器仍会提交它，从而重定向页面。

随意测试一下。

Answer 2

您是否尝试过围绕 jquery 文档准备好函数 submitMyForm(button) ？

$(document).ready(function(){

function submitMyForm(button) {
            var myForm = $(button).closest('form');
            $.ajax({
                url: $(myForm).attr('action'),
                type: "post",
                contentType:attr("enctype", "multipart/form-data"),
                data: $(myForm).serialize(),
                statusCode: {
                    400: function () {
                        $('.form-inline').after("<h1>400!</h1>");
                    },
                    200: function () {
                        $('.form-inline').after("<h1>200!</h1>");
                    }
                }
            });
        }


});