jquery - 随后的两个 jquery ajax 请求不起作用

Question

Captcha 验证正在工作，然后邮件发送 ajax 不工作，它既没有显示成功消息，也没有显示失败消息。请找到整个代码（因为我无法在此处粘贴代码，因为它给出了一些格式错误）。

http://demo.cateringandevents.in/contactusform.htm

请为此 HTML 表单提出更好的验证方法。

Answer 1

下一个函数false总是返回。您必须以异步方式思考，当您调用 ajax 调用时，程序继续执行，返回 false 并在一段时间后（无论何时服务器响应），成功回调返回 true，但没有人再监听它了。

function validateCaptach() {
    if (validateForm()) {
        var captchaval = $("#verificationcode").val();
        $.ajax({
            type: "POST",
            url: "captchacheck.php",
            async: false, // Lets make it synchronous
            data: {
                verificationcode: captchaval
            },
            success: function (data) {
                if (data == "SUCCESS") {
                    alert("captchacheck sucess..");
                    return true;
                } else {
                    alert("The security code you typed was wrong. Please try again.");
                    return false;
                }
            }
        });
    }

    return false; // No matter what happends it always return false
}

删除最后一个返回并重试async: false,（我已经添加到上一个片段中）它将迫使浏览器停止，直到它得到响应，然后它将继续正常执行您的程序进入成功回调。

如果前面的评论不起作用（async选项似乎在每种情况下都不起作用），您可以尝试将两个函数嵌套在一个中：

function submitform() {
    if (validateForm()) {
        var captchaval = $("#verificationcode").val();
        $.ajax({
            type: "POST",
            url: "captchacheck.php",
            data: {
                verificationcode: captchaval
            },
            success: function (data) {
                if (data == "SUCCESS") {
                    alert("captchacheck sucess..");
                    sendForm(); // New function
                } else
                    alert("The security code you typed was wrong. Please try again.");
            },
            error: function(jqXHR, textStatus, errorThrown) { // New error handler
                alert("Ouch! something went wrong checking the captcha?. " + errorThrown);
            }
        });
    }
}

function sendForm() {
    var sData = $("#RegisterUserForm").serialize();
    alert('i am here to process..');  
    $.ajax({
        type: "POST",
        url: "thankyou.php",
        data: sData,
        success: function (data) {
            if (data == "YESSUCCESS")
                alert("Your Query has been sent..");
            else
                alert("some error please type again...");
        },
        error: function(jqXHR, textStatus, errorThrown) { // New error handler
            alert("Ouch! something went wrong sending the form?. " + errorThrown);
        }
    });
}

Answer 2

尝试实现错误回调选项。这将为您提供必要的错误信息。您现在只实现了在出现问题时不会调用的成功回调。或者，您还可以实现在发送 ajax 请求后始终调用的完整回调。

 $.ajax({
      type: "POST",
      url: "thankyou.php",
      data: sData,
      success: function () {
          // Yeah!
      },
      error: function(){
          // oops
      }
 });