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

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

在下面的例子中，我将坚持使用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是异步执行的，如果你没有停止表单提交，浏览器仍然会提交它，因此重定向页面。

Feel free to test it out

Answer 2

您是否尝试过围绕jquery文档准备好函数submitMyForm（按钮）？

$(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 个答案: