提交表单之前等待 PHP 页面的响应

Question

在提交表单之前，我想通过调用 PHP 页面来验证数据，如果一切正常，该页面将返回一个空字符串，否则会返回一条错误消息。我当前的代码可以工作，但 async: false 已被弃用。我很难找到有效的替代方案。你能帮我吗？

谢谢！

$("form").on("submit", function(event) {
    let idForm = $(this).attr("id");
    if(correspFormCtrl[idForm]) {
        let dataFormArray = $(this).serializeArray();
        let dataForm = dataFormArray.reduce((acc, item) => {
            acc[item.name] = item.value;
            return acc;
        }, {});
        let cible = $(this);
        let ok = false;
        
        
        
        $.ajax({
            url : "php/verifHtmlForm.php", 
            type: "POST",
            async: false,
            data: { listeChamps: correspFormCtrl[idForm].champs, valeursForm: dataForm},
            success: function(data) {
                if(data) {
                    cible.find(".retourErreurForm").removeClass("invisible")[0].scrollIntoView({ block: 'start' });
                    cible.find(".infosErreurHtml").html(data);
                }
                else {
                    cible.find(".retourErreurForm").addClass("invisible");
                    ok = true;
                }
            },
            complete : function() {
                if(!ok) {
                    event.preventDefault();
                    return false;
                }
            },
            error: function(error) {
                console.error(error);
            }
        });
    }
});

我尝试过使用 Promise，但我不完全知道如何使用这种类型的技术，或者是否适合在这种情况下使用。

Answer 1

可以使用async和await结合Promise来实现 validateForm 函数返回一个 Promise。 $.ajax 调用包装在 Promise 中，以便更轻松地与 wait 一起使用。

$("form").on("submit", async function(event) {
    event.preventDefault();

    let idForm = $(this).attr("id");
    if (correspFormCtrl[idForm]) {
        let dataFormArray = $(this).serializeArray();
        let dataForm = dataFormArray.reduce((acc, item) => {
            acc[item.name] = item.value;
            return acc;
        }, {});

        try {
            let data = await validateForm(dataForm, correspFormCtrl[idForm].champs);

            let cible = $(this);

            if (data) {
                cible.find(".retourErreurForm").removeClass("invisible")[0].scrollIntoView({ block: 'start' });
                cible.find(".infosErreurHtml").html(data);
            } else {
                cible.find(".retourErreurForm").addClass("invisible");
                this.submit(); // Continue with the form submission
            }
        } catch (error) {
            console.error(error);
        }
    }
});

function validateForm(dataForm, champs) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: "php/verifHtmlForm.php",
            type: "POST",
            data: { listeChamps: champs, valeursForm: dataForm },
            success: function (data) {
                resolve(data);
            },
            error: function (error) {
                reject(error);
            },
        });
    });
}