Question

从前几天跟我提出的问题，我遇到了另一件事，现在我花了太多时间撞击我的头。

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

jQuery form submit

以下是半功能小提琴中的代码：

http://jsfiddle.net/ZcgqV/

基本上会发生什么：

我通过onSubmit（而非单击）
在提交时，它通过jQuery .ajax（）调用
如果回复为“PENDING”，则每隔1次，9次重试
如果失败，请不要提交表格
成功时，请提交表格

无论我尝试什么，我都无法在不进入循环的情况下将表单提交给我，或者在尝试远程服务器时不立即提交。

〜感到沮丧 - 尝试了100件事，但是你的失败了......

以下是您不喜欢小提琴的代码：

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上，我希望表单提交。目前，如果我在SUCCESS中使用.submit（），则会再次调用AJAX，开始执行该过程。我想要的只是FORM的动作才能触发SUCCESS。

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调用。

Answer 2

请参阅上面的评论以获取更多信息，但我认为您在此处看到的问题是：

每次pollServer（）触发时，它不仅会执行另一个ajax调用，而且它会根据重试循环准备每秒执行9次可能的ajax调用。因为您正在使用async（）方法设置另一个pollServer（）调用，所以基本上会使您的ajax调用失控。你想从你的重试循环中获取ajax调用，那么你应该至少每秒只获得1个请求，而不是1，然后是2，然后是3，等等。我可能已经读错了代码，但这是我最好的猜猜你在看什么。

更新：我不确定我的解释是否清楚，所以我想我会添加一些额外的信息。基本上，每次调用pollServer（）并获得PENDING响应时，它都会调用async，它会注册一个setTimeout（）。 setTimeout（）每秒都在运行，执行pollServer（），然后调用asynch，它会注册另一个setTimeout（），它也会每秒运行一次。现在你有两个函数，每个函数调用setTimeout（），假设它们仍然作为来自服务器的响应得到PENDING。因此，在2轮失败的调用之后，你有4个setTimeout（）调用，每个调用每秒触发ajax调用（和一个新的setTimeout）。

Answer 3

首先它应该是：$('#tehForm').submit(onsubmit_action);或$('#tehForm').on("submit",onsubmit_action);或类似的东西。切勿使用字符串形式传递函数。它使用邪恶的eval语句。

接下来，在POST之后，数据已经提交。这就是帖子的全部原因。为什么在完成部分中需要各种错误处理。失败应该处理错误处理。

如果您询问如何在超时后再试一次，请尝试以下方法： Is it possible to check timeout on jQuery.post()?

我相信超时会失败。

所以试试这个：

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

$(document).ready(function() {
    // Attach the action to the form
    $('#tehForm').on("submit",submit_the_form);
});

function submit_the_form(e){
   var dfd = $.ajax({
       url : "sendTokenPolling", 
       data : {"token":token},
       timeout : 5000 //you may want 1000, but I really think that is too short
    });
   dfd.done(function(){
      //success, form posted
   });
   dfd.fail(function(){
      //did not work/timedout
      if (retries < max_tries){
         retries += 1;
         submit_the_form(e);
      }
   });
}

表单提交与AJAX轮询呼叫

3 个答案: