Question

我有一个带有特定行动的表格。提交表单时，我发送一个调用此操作的ajax调用。另一方面，我发送另一个ajax调用来更新进度。我这样做了：

    $("form").submit(function() {               
      function callBack()
      {
            if( (this.readyState == 4) && (this.status == 200) )
            {
              console.log(this.responseText);
            }
      }

      function updateProgress (){
        asyncReq('/get_progress?progress='+progress, callBack);
      }

      function asyncReq(url, functionCallBack)
      {
            var request; //request must be a local var to avoid race condition
            try
            {   //for modern browsers
              request = new XMLHttpRequest;
            }
            catch (err)
            {// legacy IE
              request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            request.onreadystatechange = callBack;
            request.open("GET", url, true);
            request.send();
      };
      var progress = $("#progress").val();
      asyncReq('/get_progress?progress='+progress, callBack);
      setTimeout(updateProgress, 2000);
      $(this).ajaxSubmit({async: true});
      return false;
   });

我这里有2个异步javascript调用，一个用于提交表单，另一个用于更新进度。当我打印responseText中的callBack时，我只能看到0.0和1.0。这是在调用ajaxSubmit()之前和完成之后的那个。我想在中间获得所有进步的价值。据我所知，只有在asyncReq完成后才会调用ajaxSubmit的第二个ajax调用。任何人都可以告诉我在ajaxSubmit()完成之前如何进行另一个完整的ajax调用吗？

注意：

表单由文件字段和ajaxSubmit解压缩组成，处理文件并在处理完每个文件后更新进度表。 get_progress方法提取该表的进度值。我正在使用jquery.form.js通过ajax调用提交表单。

Answer 1

我不清楚你试图实现的目标。但是，这是您的代码的简化版本。

function updateProgress(){
    var progress = $("#progress").val();
    $.get('/get_progress?progress='+progress, function(data){
        //***you will get response in data
        //here you write how to handle progress and data
    }
    setTiemout('updateProgress()', 2000)

}
$('form').submit(function(){
    updateProgress();
    $(this).ajaxSubmit({async: true});
})

我不确定ajaxSubmit()函数究竟为你做了什么！顾名思义，我猜它只是提交表格。现在，如果您想用自己的逻辑来显示进度，只需将该逻辑放在***标记区域即可。

Answer 2

您在两秒钟后提交了3个并发的ajax请求：

asyncReq('/get_progress?progress='+progress, callBack);
setTimeout(updateProgress, 2000);（后来运行）
$(this).ajaxSubmit({async: true});

您使用的是较旧的浏览器吗？如果是这样，您将遇到两个连接限制。请参阅Max parallel http connections in a browser?和How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

如果并发请求数量有限制，您的超时请求将在浏览器上排队，并仅在ajax表单或第一个进度完成后提交。

Answer 3

看起来您的代码仅在2000毫秒后更新了一次进度。这一行：

setTimeout(updateProgress, 2000);

您是否尝试过设置更新间隔？这将使该代码每xxxx毫秒运行一次。像这样：

myVar=setInterval(updateProgress,2000);

然后，您需要使用clearInterval来阻止该代码运行。像这样：

clearInterval(myVar);

请注意，我必须添加变量myVar。 clearInterval函数需要它，并且需要它才能工作。您可能必须将其全局定义为var myVar。

Answer 4

请check this。

setTimeout函数延迟指定的时间段然后   触发指定函数的执行。一旦功能是   触发了setTimeout已经完成。

setInterval函数也会在之前的指定时间内延迟   触发特定功能的执行。它的不同之处在于   触发该功能后，命令无法完成。   相反，它再次等待指定的时间，然后触发   再次运行并继续重复此触发过程   按指定的时间间隔运行，直到网页为止   unloaded或调用clearInterval函数。

Answer 5

按照@ HungryCoder的回复，你只缺少一件事。您必须从表单提交中返回false 。

$('form').submit(function(){
    updateProgress();
    $(this).ajaxSubmit({async: true});
    return false;
});

如果没有返回false，表单仍然可以自然地执行。或者，您可以捕获提交事件变量。

$('form').submit(function( e ){
    e.preventDefault();
    updateProgress();
    $(this).ajaxSubmit({async: true});
    return false;
});

调用e.preventDefault()也会阻止表单执行默认的浏览器定义活动（即提交到服务器）。

使用ajaxSubmit进行异步调用 - jquery.form

5 个答案: