4

我有一个带有特定动作的表格。提交表单后，我发送一个调用此操作的 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 调用，一个用于提交表单，一个用于更新进度。当我打印出responseTextin 时callBack，我只能看到 0.0 和 1.0。那是在ajaxSubmit()调用之前和完成之后的一个。我也想在中间获得所有进展的价值。据我了解，asyncReq仅在ajaxSubmit完成后才调用第二个 ajax 调用。谁能告诉我如何在完成之前进行另一个完整的 ajax 调用ajaxSubmit()？

笔记：

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

4

5 回答 5

2

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

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

您使用的是旧版浏览器吗？如果是这样，您将遇到两个连接限制。请参阅浏览器中的最大并行 http 连接数？流行的浏览器允许多少并发 AJAX (XmlHttpRequest) 请求？

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

于 2012-10-26T01:09:26.683 回答
2

我不清楚你试图达到什么目的。但是，这是您的代码的简化版本。

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()实际上对您有什么功能！顾名思义，我猜它只是提交表单。现在，如果您想使用自己的逻辑来显示进度，只需将该逻辑放在***标记区域即可。

于 2012-10-24T09:48:00.247 回答
0

请检查这个。

setTimeout 函数延迟指定的时间段，然后触发指定函数的执行。一旦函数被触发，setTimeout 就完成了。

setInterval 函数还会在触发执行特定函数之前延迟指定时间。不同之处在于，在触发该功能后，该命令并未完成。相反，它会再次等待指定的时间，然后再次触发该函数，并继续以指定的时间间隔重复触发该函数的过程，直到卸载网页或调用 clearInterval 函数。

于 2012-10-24T19:54:09.513 回答
0

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

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

如果没有 return false，表单仍然会自然地做它做的事情。或者，您可以捕获提交事件变量。

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

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

于 2012-10-30T18:24:14.000 回答
0

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

setTimeout(updateProgress, 2000);

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

myVar=setInterval(updateProgress,2000);

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

clearInterval(myVar);

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

于 2012-10-24T12:55:02.243 回答