如何使用JQUERY（CodeIgniter）在AJAX中制作进度条

有没有一种方法可以使用jquery使用post数据（QUERIES）并且不上传文件来为ajax制作进度条？如何使用JQUERY（CodeIgniter）在AJAX中制作进度条

因为ProgressEvent.lengthComputable只读属性是一个布尔标志，指示ProgressEvent所关心的资源是否具有可计算的长度。

如果不是，则ProgressEvent.total属性没有重要的值。所以我的问题是我使用ajax进行长时间查询，而不是上传文件。谢谢。

来源

2016-07-25 Emmanuel Villadelrey Palinsad

为什么你当响应成功隐藏JPG装载 –

我已经习惯了不使用装载* * blockUI **库，b如果查询太长，有时候mozilla会杀死长时间运行的脚本。所以我想出了这个解决方案，所以mozilla不会因为有进展而杀了我的页面。 –

嗨，据我所知，你有一个很长的过程运行在服务器上，你打电话使用XHR，现在你想在浏览器中显示进度条。

简短的回答

不可能在阿贾克斯

龙答案

阿贾克斯只是相同的HTTP请求，也没有办法知道对服务器的请求的状态。只有最终的输出和http状态码可用。

解决方案

你想要什么是网络插座，而不是阿贾克斯。 WS是双向通信标准。在服务器上，您可以继续将请求的状态发布到Web套接字中。在客户端从web套接字读取并显示更改。

因此，总体而言，您需要一台WS服务器。使用websocket从客户端发送请求，并最终保持阅读websocket的状态，直到获得结果。

这是并发症需要

虽然这是非常漫长而乏味的工作我知道，有些项目需要它，如果他们有长期的任务。您可以选择的另一种方法是将任务推送到celery并使用XHR轮询来获取作业的状态。

希望这有助于

来源

2016-07-25 08:48:44

谢谢@xandercage :)我会阅读关于websockets。谢谢:) –

@EmmanuelVilladelreyPalinsad标记答案，如果这有助于:)。 –

在一个AJAX请求你不知道你执行调用时的响应时间。

解决方案可能是为ajax调用设置超时限制，并根据此时间设置进度条的动画。当然，在这个时间限制之前，这个回应将是可用的（至少这是我们想要的）。在这种情况下，强制进度条完成动画并继续进行数据操作。

例

HTML

<!-- LOADER --> 
<div id="loader"></div>

jQuery的

/** 
* Execute ajax request and initialize loader animation 
* @param time {number} The ajax timeout limit and progress bar animation duration 
*/ 
function executeAjax(time) { 

    // Start progress bar initialization 
    $('#loader').animate({ 'width', '100%' }, time); 

    // Execute ajax call 
    $.ajax({ 
     url: '...', 
     method: 'POST', 
     data: { ... }, 
     dataType: 'json', 
     success: function(data) { 
      // Stop previous animation and start a new one with 0.5 sec duration 
      $('#loader').stop().animate({ 'width', '100%' }, 500) 
         .queue(function() { 
          // Handle the response data here 
          $(this).dequeue(); 
         }); 
     }, 
     error: function(jqXHR, errorType) { 
      alert('Error: ' + errorType); 
     }, 
     timeout: time 
    }); 
} 

// Call the function passing a timeout of 10 seconds 
executeAjax(10000);

来源

2016-07-25 09:52:03 kapantzak

谢谢@kapantzak我会尝试这个解决方案。谢谢：） –

如何使用JQUERY（CodeIgniter）在AJAX中制作进度条

回答

相关问题