為什么我不能處理從 $.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>");
                    }
                }
            });
        }


});

為什么我不能處理從 $.ajax 返回的 HTTP 狀態代碼？

問題描述

2 個解決方案

解決方案1
2 已采納 2012-11-23 18:30:00

解決方案2
0 2012-11-22 23:26:36

為什么我不能處理從 $.ajax 返回的 HTTP 狀態代碼？

問題描述

2 個解決方案

解決方案1 2 已采納 2012-11-23 18:30:00

解決方案2 0 2012-11-22 23:26:36

解決方案1
2 已采納 2012-11-23 18:30:00

解決方案2
0 2012-11-22 23:26:36