Question

我有一个页脚的网站，其中有一个小表格。这种形式只有两件事：一个用于收发电子邮件的输入文本框和一个提交按钮。

当用户按下Submit按钮时，不会发生重定向，而是进行AJAX调用以将电子邮件添加到Database表中，并使用jQuery slideDown()显示相应的消息。

问题在于，即使没有重定向到另一个页面实际发生，但有时我刷新页面时，我得到一个浏览器警报，这可能会重新提交数据。我不总是来，有时候。不知道为什么。

如何才能彻底阻止此错误发生？

JSFiddle（见下面的注释）： http://jsfiddle.net/ahmadka/7cZZY/1/

请注意，因为footer_subscribe.php文件在JSFiddle中是无法访问的，所以我不会在此处获得表单重新提交错误。但是，当您刷新原始实际页面时，有时会出现错误：

实际页面（表单位于页面底部的页脚部分）： http://bit.ly/15eb2Cx

HTML代码：

<section class="subscribe">
    <form class="form-wrapper cf" method="post">
        <input name="email" placeholder="Enter your email here..." />
        <button id="submitBtn" type="submit">Subscribe</button>
    </form>
    <p></p>
</section>

JavaScript代码：

$(function () {
    $("#submitBtn").click(function (event) {
        event.preventDefault();
        event.returnValue = false;
        var inputEmail = $(".subscribe input[name=email]").val();
        var inputEmailTrimmed = $.trim(inputEmail);
        if (inputEmail == "") {
            $(".subscribe p").html("Please enter an email address.").slideDown();
        } else if (inputEmailTrimmed == "" && inputEmail != inputEmailTrimmed) {
            $(".subscribe p").html("Simply entering spaces won't cut it :)").slideDown();
        } else {
            $.ajax({
                type: "POST",
                url: "footer_subscribe.php",
                data: {
                    email: inputEmail
                },
                success: function (data) {
                    if (data == "successful") {
                        $(".subscribe p").html("Thanks for your interest!").slideDown();
                    } else if (data == "already_subscribed") {
                        $(".subscribe p").html("This email is already subscribed.").slideDown();
                    } else if (data == "invalid_email") {
                        $(".subscribe p").html("This email is invalid.").slideDown();
                    } else {
                        $(".subscribe p").html("Something went wrong. Please try again later.").slideDown();
                    }
                },
                error: function () {
                    $(".subscribe p").html("Subscription is not available.").slideDown();
                }
            });
        }

    });
});

如何在刷新时阻止表单重新提交警报？

0 个答案: