表单提交与AJAX轮询呼叫

Question

继续我的问题，从另一天开始，我遇到了另一件事情，现在我已经花了太多时间敲打我的头。

大部分情况下，我无法让SUCCESS表单提交。我想这也：

jQuery form submit

下面是一个半功能小提琴代码：

http://jsfiddle.net/ZcgqV/

本质上发生的事情是这样的：

1. 我绑定的方法通过onSubmit（而不是点击）向表单提交
2. 提交时，它要求通过jQuery阿贾克斯（）的远程服务器调用
3. 如果回答是“待定”，重试每1秒，九次
4. 如果失败，不提交表单
5. 成功时，提交表单

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

〜沮丧，试图-100-的东西 - 即失效-LY你...

下面的代码直接的情况下，你不喜欢小提琴：

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，启动该过程。我想要的只是表单的行动，只有在成功的情况下才能开火。

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，然后是2，然后是3等等。我可能读了错误的代码，但这是我最好的猜你在看什么。

更新：我不确定我的解释是否清楚，因此我想添加一些其他信息。基本上，每次调用pollServer（）并获得一个PENDING响应时，它都会调用异步，它会注册一个setTimeout（）。 setTimeout（）每秒都会继续运行，执行pollServer（），然后调用异步，它会注册另一个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); 
     } 
    }); 
}