javascript - 表单提交与 AJAX 轮询调用

Question

跟进我前几天的问题，我遇到了另一件事，现在我花了太多时间来解决这个问题。

大多数情况下，我无法提交 SUCCESS 表单。我也试过这个:

jQuery form submit

这是半功能 fiddle 中的代码:

http://jsfiddle.net/ZcgqV/

本质上是这样的:

1. 我通过 onSubmit(而不是点击)将方法绑定(bind)到表单提交
2. 提交时，它通过 jQuery .ajax() 调用调用远程服务器
3. 如果响应为“PENDING”，则每 1s 重试一次，共九次
4. 如果失败，请不要提交表单
5. 成功后，提交表单

无论我尝试什么，我都无法让表单在我想要的时候提交而不进入循环，或者在它尝试远程服务器时不立即提交。

~沮丧的尝试 100 件失败的事情是你的...

如果你不喜欢 fiddles，这里是直接的代码:

var retries = 0;
var success = false;
var token = "toki wartooth is not a bumblebee";

$(document).ready(function() {
    // Attach the action to the form
    $('#tehForm').attr('onSubmit', 'onsubmit_action(event)');
});

function async(fn) {
    setTimeout(fn, 1000);
}

function pollServer() {
    $.ajax({
        type: "POST",
        cache: "false",
        url: "/remoteCall",
        dataType: "json",
        data: {
            ref_token: token
        }
    }).done(function(data, code, jqXHR) {

        switch (data.status) {
        case "SUCCESS":
            alert("Success");
            success = true;

            // --> HERE IS WHERE I WANT THE FORM TO SUBMIT <--

            break;

        case "PENDING":
            if (retries < 9) {
                retries += 1;
                async(function() {
                    pollServer();
                });
            } else {
                alert("Failed after 9 tries");
            }
            break;

        case "ERROR":
            alert("Error");
            break;

        default:
            alert("Some kind of horrible error occurred");
            break;
        }

    }).fail(function(jqXHR, textStatus) {
        var statusCode = jqXHR.status;
        alert("Request failed: " + statusCode + " " + textStatus);
    });

}

function onsubmit_action(event) {
        pollServer();
        if (success === false) {
            // RETURN FALSE DIDN'T WORK, SO I FOUND THIS
            event.preventDefault();
        }
}​

编辑:

同样，这里真正的问题是我停止提交表单。在成功时，我希望提交表单。目前，如果我在 SUCCESS 中使用 .submit()，则会再次调用 AJAX，重新开始该过程。我想要的是仅在成功时触发 FORM 的 ACTION。

Answer 1

尽可能多地使用原始代码；这是一个解决方案:

通过回发发送表单 http://jsfiddle.net/tpm7v/4/

通过 Ajax 发布表单 http://jsfiddle.net/tpm7v/5/

    var retries = 0,
    token = "toki wartooth is not a bumblebee",
    sendRequest,
    handelResponse,
    postFormToServer,
    $theForm = $('#tehForm');

$(document).ready(function() {
    // Attach the action to the form
    $theForm.bind('submit', onsubmit_action);
});

sendRequest = function() {
    $.ajax({
        type: "POST",
        cache: "false",
        url: "/remoteCall",
        dataType: "json",
        data: {
            ref_token: token
        },
        success: handelResponse
    });
};

postFormToServer = function() {
    $.ajax({
        type: "POST",
        cache: "false",
        url: "/remoteCallToTakFormData",
        dataType: "json",
        data: $form.serialize(),
        success: function() {
            alert('success!');
        }
    });
};

handelResponse = function(data, code, jqXHR) {
    switch (data.status) {
        case "SUCCESS":
            postFormToServer();
            break;

        case "PENDING":
            if (retries < 9) {
                retries += 1;
                setTimeout(sendRequest , 1000);
            } else {
                alert("Failed after 9 tries");
            }
            break;

        case "ERROR":
            alert("Error");
            break;

        default:
            alert("Some kind of horrible error occurred");
            break;
        }
};

function onsubmit_action(evt) {
    evt.preventDefault();
    sendRequest();
}
​
​

请记住，我将使用您提供的代码。您应该能够将其移植到您的实际实现中。您可能还想尝试类似 https://github.com/webadvanced/takeCommand 的东西帮助清理所有 Ajax 调用。