jQuery PreventDefault不会停止执行(jQuery PreventDefault not stop execution)

我应该先粘贴代码

$(document).ready(function(){ $("#submit").click(function(e){ $(".error").hide(); var hasError = false; .... .... var captcha = $("#captchacode").val(); if(captcha == '') { $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); hasError = true; } else { $.post("/checkcaptcha.php", { captchac: captcha}, function(data){ if (data == "Invalid"){ $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); hasError = true; e.preventDefault(); } } ); } if(hasError == false) { $(this).hide(); $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); $.post("/sendemail.php", { emailFrom: emailFromVal, name: name, message: messageVal }, function(data){ $("#sendEmail").slideUp("normal", function() { $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); }); } ); } return false; }); });

一切正常。 正在发送电子邮件。 我在获取无效验证码值时收到错误消息。 在显示错误消息之后，它将进入下一步并且表单正在提交。 我需要你的建议来解决这个问题。

谢谢。

I should paste code first

$(document).ready(function(){ $("#submit").click(function(e){ $(".error").hide(); var hasError = false; .... .... var captcha = $("#captchacode").val(); if(captcha == '') { $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); hasError = true; } else { $.post("/checkcaptcha.php", { captchac: captcha}, function(data){ if (data == "Invalid"){ $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); hasError = true; e.preventDefault(); } } ); } if(hasError == false) { $(this).hide(); $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); $.post("/sendemail.php", { emailFrom: emailFromVal, name: name, message: messageVal }, function(data){ $("#sendEmail").slideUp("normal", function() { $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); }); } ); } return false; }); });

Everything is working. Email is being sent. I'm getting error message while putting invalid captcha value. Just after showing error message, it's going in next step and form is submitting. I need your suggestion to fix that.

Thanks.

最满意答案

jQuery.post()函数是AJAX调用的简写。 AJAX调用是异步的，通过传递在请求完成时执行的回调来工作。 在请求收到响应之前，调用$.post() 不会停止代码的执行，因为AJAX的全部意义不会发生。 这意味着你的if(hasError == false)行将在回调函数的if (data == "Invalid")部分之前执行。

如果你想在AJAX调用的响应之后发生某些事情，那么你需要将它移动到回调函数：

$(document).ready(function () { $("#submit").click(function (e) { $(".error").hide(); var hasError = false, elem = this; ........ var captcha = $("#captchacode").val(); if (captcha == '') { $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); hasError = true; } else { $.post("/checkcaptcha.php", { captchac: captcha }, function (data) { if (data == "Invalid") { $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); hasError = true; e.preventDefault(); } else { $(elem).hide(); $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); $.post("/sendemail.php", { emailFrom: emailFromVal, name: name, message: messageVal }, function (data) { $("#sendEmail").slideUp("normal", function () { $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); }); }); } }); } return false; }); });

The jQuery.post() function is a shorthand for an AJAX call. AJAX calls are asynchronous, and work by passing callbacks that execute when the request completes. Calling $.post() does not stop the execution of the code until the request receives a response, because the whole point of AJAX is for that not to happen. This means that your if(hasError == false) line will execute before the if (data == "Invalid") part of your callback function.

If you want something to happen after the response from the AJAX call then you need to move it to the callback function:

$(document).ready(function () { $("#submit").click(function (e) { $(".error").hide(); var hasError = false, elem = this; ........ var captcha = $("#captchacode").val(); if (captcha == '') { $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); hasError = true; } else { $.post("/checkcaptcha.php", { captchac: captcha }, function (data) { if (data == "Invalid") { $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); hasError = true; e.preventDefault(); } else { $(elem).hide(); $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); $.post("/sendemail.php", { emailFrom: emailFromVal, name: name, message: messageVal }, function (data) { $("#sendEmail").slideUp("normal", function () { $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); }); }); } }); } return false; }); });jQuery PreventDefault不会停止执行(jQuery PreventDefault not stop execution)

我应该先粘贴代码

$(document).ready(function(){ $("#submit").click(function(e){ $(".error").hide(); var hasError = false; .... .... var captcha = $("#captchacode").val(); if(captcha == '') { $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); hasError = true; } else { $.post("/checkcaptcha.php", { captchac: captcha}, function(data){ if (data == "Invalid"){ $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); hasError = true; e.preventDefault(); } } ); } if(hasError == false) { $(this).hide(); $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); $.post("/sendemail.php", { emailFrom: emailFromVal, name: name, message: messageVal }, function(data){ $("#sendEmail").slideUp("normal", function() { $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); }); } ); } return false; }); });

一切正常。 正在发送电子邮件。 我在获取无效验证码值时收到错误消息。 在显示错误消息之后，它将进入下一步并且表单正在提交。 我需要你的建议来解决这个问题。

谢谢。

I should paste code first

$(document).ready(function(){ $("#submit").click(function(e){ $(".error").hide(); var hasError = false; .... .... var captcha = $("#captchacode").val(); if(captcha == '') { $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); hasError = true; } else { $.post("/checkcaptcha.php", { captchac: captcha}, function(data){ if (data == "Invalid"){ $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); hasError = true; e.preventDefault(); } } ); } if(hasError == false) { $(this).hide(); $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); $.post("/sendemail.php", { emailFrom: emailFromVal, name: name, message: messageVal }, function(data){ $("#sendEmail").slideUp("normal", function() { $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); }); } ); } return false; }); });

Everything is working. Email is being sent. I'm getting error message while putting invalid captcha value. Just after showing error message, it's going in next step and form is submitting. I need your suggestion to fix that.

Thanks.

最满意答案

jQuery.post()函数是AJAX调用的简写。 AJAX调用是异步的，通过传递在请求完成时执行的回调来工作。 在请求收到响应之前，调用$.post() 不会停止代码的执行，因为AJAX的全部意义不会发生。 这意味着你的if(hasError == false)行将在回调函数的if (data == "Invalid")部分之前执行。

如果你想在AJAX调用的响应之后发生某些事情，那么你需要将它移动到回调函数：

$(document).ready(function () { $("#submit").click(function (e) { $(".error").hide(); var hasError = false, elem = this; ........ var captcha = $("#captchacode").val(); if (captcha == '') { $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); hasError = true; } else { $.post("/checkcaptcha.php", { captchac: captcha }, function (data) { if (data == "Invalid") { $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); hasError = true; e.preventDefault(); } else { $(elem).hide(); $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); $.post("/sendemail.php", { emailFrom: emailFromVal, name: name, message: messageVal }, function (data) { $("#sendEmail").slideUp("normal", function () { $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); }); }); } }); } return false; }); });

The jQuery.post() function is a shorthand for an AJAX call. AJAX calls are asynchronous, and work by passing callbacks that execute when the request completes. Calling $.post() does not stop the execution of the code until the request receives a response, because the whole point of AJAX is for that not to happen. This means that your if(hasError == false) line will execute before the if (data == "Invalid") part of your callback function.

If you want something to happen after the response from the AJAX call then you need to move it to the callback function:

$(document).ready(function () { $("#submit").click(function (e) { $(".error").hide(); var hasError = false, elem = this; ........ var captcha = $("#captchacode").val(); if (captcha == '') { $("#captchacode").after('<span class="error">You forgot to enter security image.</span>'); hasError = true; } else { $.post("/checkcaptcha.php", { captchac: captcha }, function (data) { if (data == "Invalid") { $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>'); hasError = true; e.preventDefault(); } else { $(elem).hide(); $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />'); $.post("/sendemail.php", { emailFrom: emailFromVal, name: name, message: messageVal }, function (data) { $("#sendEmail").slideUp("normal", function () { $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>'); }); }); } }); } return false; }); });