我有下一个可在 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 是否已链接。
最佳答案
一个<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是异步执行的，如果您不停止表单提交，浏览器仍然会提交它，从而重定向页面。
关于javascript - 为什么我无法处理 $.ajax 返回的 HTTP 状态代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13520933/