用ajax提交表单，用回调异步答案

【问题标题】：Submit form with ajax, asynchronously with a callback用ajax提交表单，用回调异步
【发布时间】：2014-03-14 20:16:35
【问题描述】：

我意识到 SO 包含有关此主题的材料，我已经完成了它，但似乎无法让它发挥作用。

我的函数接受 JSON 响应，对其进行解析并在成功时返回 false，在错误时返回 true（这是故意向后）。

console.log 显示我得到了正确的响应，但我的函数不会返回（submitme 仍然为 false，尽管它在回调中更改为 true）。因此，该函数始终返回 false。

~~我猜我的回调操作有问题，但我不确定我做错了什么。~~
我可能不在此处，但我认为回调还可以，它只是在脚本执行后执行（因此是异步的）。
但我的问题仍然存在，在这种情况下，如果布尔值仅通过 ajax 更改，我如何让表单提交为真？

这是我的 sn-p：

$(".form").submit(function(){
    error = $("#error");
    var submitme = false;

    function ajaxCall(url, type, data, callback) {
    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response){
            try {
            obj = JSON.parse(response);
            text = obj.Error;
            error.html('');
            error.append(text);
            //if the json was parsed, return false
            submitform = false;
            }
            catch (error) {
                //if an error was thrown, return true
                submitform = true;
                }
            callback(submitform);
        },
    });

    }

    function ajaxCallSuccess(submitform) {
        console.log(submitform); //This shows correct output!
        if (submitform == 'true'){ //Here I want to manipulate the global submitme variable so I can submit the form on "true"
            submitme = true; //<-- this (I think) changes the global variable asynchronousy (so after the function is read), hence the outer function always returns false
        }

    };

    ajaxCall(url, type, data, ajaxCallSuccess);


    if (submitme == true) {
        return true;
    }
    else {
        return false;
    }
});

编辑：
我编辑了这篇文章，也许可以稍微澄清一下这个问题

【问题讨论】：

控制台中“submitform”的输出是什么：console.log(submitform);
@Sunny 注意 ajax 调用中的 try 块，submitform 在成功解析 response (obj = JSON.parse(response)) 时返回 false，在错误时返回 true。 console.log 根据响应是否为 JSON 对象输出正确的布尔值，我似乎无法从 ajaxCall 函数中获取这些值。这决定了表单是否提交。
亲爱的朋友，错误是全局变量吗？
@FUserThrowError 我没有收到错误，只是不是我需要的输出。看看function ajaxCallSuccess，我正在尝试从那里更改submitme 变量，但没有成功。

标签： javascript jquery ajax

【解决方案1】：

您需要始终返回 false，然后手动提交表单以防 AJAX 调用成功：

$('.form').submit(function() {
    function ajaxCall(url, type, data, callback) {
        $.ajax({
            url: url,
            type: type,
            data: data,
            dataType: 'json',
            success: function(response) {
                callback(true);
            },
            error: function() {
                callback(false);
            }
        });
    }

    var form = $(this);

    function ajaxCallSuccess(submitform) {
        if (submitform) {
            // submit the form here:
            form[0].submit();
        }
    };

    ajaxCall(url, type, data, ajaxCallSuccess);

    return false;
});

【讨论】：

从回调内部提交表单让我陷入无限循环，因为它基本上一直向这个返回 false 的函数发送请求
没错。我的回答有误。您应该使用 form[0].submit(); 在本机 DOM 元素上调用提交函数，而不是在 jQuery 元素上调用它，这将使用 form.submit(); 触发 .submit 事件处理程序。我已经更新了我的答案以反映这一点。
forms（复数）对我有用，而不是 form（单数）。我不知道你是否想在你的答案中改变它。无论哪种方式，它都有效，所以谢谢。

【解决方案2】：

我意识到 SO 包含有关此主题的材料，我已经完成了它，但似乎无法让它发挥作用。

为什么？你难道没有理解那里解释了什么......？

但我的问题仍然存在，在这种情况下，如果布尔值仅通过 ajax 更改，我如何让表单提交为真？

您不能从异步处理程序中返回一个值，并期望该值在它后面的代码中可用，因为异步执行。以下代码不会“等待”异步操作完成，这就是异步的全部点。

因此，请立即取消提交表单，然后在适用的情况下从回调函数中提交表单。

【讨论】：

显然他不明白，所以才问这个问题。