表单提交就像ajax无法正常工作一样

Question

我有一个表格，用于检查db中输入电子邮件的状态。 问题是，每当我不填写任何内容并按Enter时，它都会“刷新”页面。 当我尝试自己刷新它时，将显示以下弹出窗口：“确认表单重新提交。您要查找的页面是您输入的已使用信息。返回该页面可能会导致您重复执行任何操作。是否要接着说？”。

有趣的是，我确实通过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'文件。 我100％确信该文件很好。

Answer 1

使用表单的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处理，而不仅仅是单击提交按钮。

Answer 2

您的“单击”处理程序必须确保<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>代替“提交”输入。

Answer 3

它试图执行“提交”而不是Ajax提交。 尝试删除type="submit"并使用Ajax提交。