我有一个带有页脚的网站,其中有一个小表格。此表单中只有两件事:用于接收电子邮件的输入文本框和提交按钮。
当用户按下提交按钮时,不会发生重定向,而是执行 AJAX 调用以将电子邮件添加到数据库表中,并使用 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();
}
});
}
});
});