我有一个表格，它检查数据库中输入电子邮件的状态。问题是，每当我不填写任何内容并点击回车键时，它就会"刷新"页面。当我尝试自己刷新它时，会显示以下弹出窗口："确认表单重新提交。您要查找的页面使用了您输入的信息。返回到该页面可能会导致重复您所做的任何操作。您想继续吗？"。
有趣的是，我确实通过Ajax提交了我的表单。它适用于除此之外的任何其他页面，这有点奇怪。我重新检查了所有的东西，但找不出哪里有错。
这是我的表单：
<div class="content main container">
<div class="content main box">
<form method="post" id="checkStatForm" name="form">
<input type="email" class="fullwidth-input-field" name="email" placeholder="- fill in the email you registered with -" autocomplete="off" />
</form>
<input type="submit" class="button red" id="checkStatusNow" value="Check status" />
</div>
</div>
这是我的javascript文章
//Statuscheck
$(function() {
$("#checkStatusNow").click(function(e) {
$.ajax({
type: "POST",
url: "db-requests/db-statuscheck.php",
data: $("#checkStatForm").serialize(),
success: function(data,textStatus,jqXHR){ finishCheck(data,textStatus,jqXHR); }
});
});
});
function finishCheck( data , textStatus ,jqXHR ) {
if ( data == "requiredFieldsStatusCheck" ) {
$('#emptyField').fadeIn(500).show();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "errorEmailFormatStatusCheck" ) {
$('#wrongEmailFormat').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "noPaymentReceived" ) {
$('#noPaymentReceived').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "paymentReceivedAwaitingProcessing" ) {
$('#awaitingProcessing').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "udidIsActivated" ) {
$('#udidIsActivated').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "betaIsActivated" ) {
$('#betaIsActivated').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
}
if ( data == "noEntryFound" ) {
$('#noEmailResults').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
}
//End statuscheck
有谁知道我做错了什么？如果您需要"db-statuscheck.php"文件，请告诉我。我百分之百肯定这个文件很好。
使用表单的onsubmit处理程序而不是单击按钮，并且需要返回false或阻止默认值：
$("#checkStatForm").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "db-requests/db-statuscheck.php",
data: $("#checkStatForm").serialize(),
success: function(data,textStatus,jqXHR){ finishCheck(data,textStatus,jqXHR); }
});
});
现在，通过回车键提交表单也将通过ajax处理，而不仅仅是点击提交按钮。
您的"点击"处理程序必须确保<input type=submit>的默认行为不会发生，因为该默认行为是<form>的普通提交。
$("#checkStatusNow").click(function(e) {
e.preventDefault(); // <---- THIS
$.ajax({
type: "POST",
url: "db-requests/db-statuscheck.php",
data: $("#checkStatForm").serialize(),
success: function(data,textStatus,jqXHR){ finishCheck(data,textStatus,jqXHR); }
});
});
纯粹主义者可能不同意，我添加这一点是为了完整性，而不是激起愤怒，但另一种选择是使用<button type=button>代替"提交"输入。
它试图执行"提交"而不是Ajax提交。尝试删除type="submit"并使用Ajax提交。