javascript - ajax 回调后如何从主函数返回 false？

Question

我通过进行 ajax 调用并提供回调来执行编辑以确保防止重复的电子邮件。如果存在重复项，我想从提交事件返回 false。有没有一种优雅的方法可以在不设置 async=false 的情况下实现这一目标？我尝试过的(请参阅 emailCallback)不起作用。

提交事件

编辑(包括提交处理程序的其余部分)。

$("#form-accounts").on("submit", function (e) {
    e.preventDefault();
    if (!$(this).get(0).checkValidity()) return false;
    if (!customValidation(true, false)) return;
    checkDupEmail(emailCallback);
    function emailCallback(result) {
        if (result) return (function () { return false } ());
    }
    if ($("#submit").text() == "Create Account") {
        var formData = $("#form-accounts").serialize().replace("''", "'");
        ajax('post', 'php/accounts.php', formData + "&action=create-account", createSuccess);
        function createSuccess(result) {
            if (isNaN(result)) {
                showMessage(0, result);
                return;
            }
            localStorage.setItem("account-id", result);
            debugger
            setUsertype($("input[name=user-type]:checked").val());
            showMessage(1, "Account Created");
        };
        return
    }
    var rString = randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
    function randomString(length, chars) {
        var result = '';
        for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
        return result;
    };
    var anRandom = randomString(14, rString);
    $("#code").val(anRandom);
    console.log("v-code=" + anRandom);
    $("#submit").css({ 'display': 'none' });
    $("#verify").css({ 'display': 'block' });
    var subject = "Writer's Tryst Verification Code"
    $("#subject").val(subject);
    var msg = "This mail is intended for the person who requested verification of email ownership at Writers-Tryst (" + getWriterTrystURL() + ").\n\n" + "Double click on the code below and then copy it. Return to our website and and paste the code.\n\nYour verification code: \n\n" + anRandom;
    $("#msg").val(msg);
    var formData = $("#form-accounts").serialize().replace("''", "'");
    ajax('post', 'php/sendmail.php', formData, successMail, "create-account error: ");
    function successMail(result) {
        $("#ver-email-msg").val("An email has been sent to you. Double-click the verification code then copy and paste it below.").css({ 'display': 'block' });
    }
});

function checkDupEmail(callback) {
    var data = {};
    data.action = "validate-email";
    data.email = $("#email").val();
    ajax('post', 'php/accounts.php', data, emailSuccess);
    function emailSuccess(result) {
        if (parseInt(result) > 0) {
            showMessage(0, "The email address is in use. Please supply another or login instead of creating a new account.")
            callback(true);
        } else callback(false);
    }
}

Answer 1

为什么不在 Ajax 调用成功完成时提交表单，而不是传递回调？

$("#form-accounts").on("submit", function (e) {
    // Always cancel the submit initially so the form is not submitted until after the Ajax call is complete
    e.preventDefault();

    ...

    checkDupEmail(this);

    ...
});

function checkDupEmail(form) {
    var data = {};
    data.action = "validate-email";
    data.email = $("#email").val();
    ajax('post', 'php/accounts.php', data, function(result) {
        if (parseInt(result) > 0) {
            showMessage(0, "The email address is in use. Please supply another or login instead of creating a new account.")
        } else {
            form.submit();
        }
    }
}

比这更好的方法是使用 Ajax 提交表单。这将消除对服务器的两次调用的需要。