当后台发生其他事情时调用ajax

Question

我试图在上传文件并解压缩文件时显示进度百分比。我正在使用 ruby​​-zip 解压缩文件。解压缩时，我增加计数器并将其存储在数据库中。我有一个像

这样的表格

<% form_tag '/unzip', :multipart => true do %>
  <%= file_field_tag "zipfile", :size => 12 %> 
  <button class="add_button" type="submit" value="Add"> Add </button>
<% end %>
<div class="progress">
</div>

在unzip 操作中，所有内容都可以解压缩并将值存储在数据库中。现在，我想每 2 秒左右更新一次.progress div。首先，我尝试在单击按钮时进行 ajax 调用并调用另一个获得此进度的方法。但我没有成功，因为下面这个简单的代码给了我错误。

<script>
$(".add_button").click(function() {
  $.ajax({
    url: "/get_progress", 
    method: "POST"
  })
})
</script>

在get_progress方法中，我只是像

一样从数据库中取出值

def get_progress
  @progress = Progress.last.value
  respond_to do |format|
    format.js
  end
end

为了简单的检查目的，我只是在get_progress.js.erb 中做console.log("rendered")。但这永远不会被调用，因为它之前有错误消息。但是，我检查了一下，ajax 调用正在向get_progress 发出请求。

但问题是，我在 jquery1.6.3 行号 7948 中的 xhr.send((s.hasContent && s.data) || null) 收到错误。我想我收到此错误是因为此页面在 ajax 调用期间被重定向到其他地方，并且还有另一个请求正在进行我打电话是因为很明显，当表单被提交时我有另一个动作被调用。

当我通过执行以下操作打印出 ajax 调用错误时：

error:function(xmlHTTPRequest, textStatus, errorThrown){
  console.log(xmlHTTPRequest);
}

我得到了这个：

Object {readyState = 0 ,status = 0 ,statusText = "error" }

我认为我的问题类似于question。但是，这里提供的答案并没有解决我的问题。

有什么办法可以解决这个问题吗？我希望问题很清楚！

Answer 1

当我将 ajax 调用从 post 更改为 get 时，这似乎对我有用。

查看：

Progress:
<div id="progress">
</div>

<br />

<button class="add_button" type="submit" value="Add"> Add </button>
<script>
$(".add_button").click(function() {
  $.ajax({
    url: "/get_progress", 
    method: "get",
    dataType: "script"
  })
})
</script>

控制器：

def get_progress
  @progress = Progress.last.value
  respond_to do |format|
    format.js
  end
end

get_progress.js.erb：

$("#progress").text("<%= @progress.to_s %>");

需要检查的一些明显事项：

• 您已使用“get”操作为“/get_progress”添加了正确的路由
• JQuery 已安装并正在运行
• get_progress.js.erb 中的代码是正确的。如果 JS 和嵌入的 rails 逻辑不能正常工作，通常看起来“什么都没有发生”。从像上面这样简单的事情开始......

附：循环运行：

function updateProgress() {
      $.ajax({
        url: "/get_progress", 
        method: "get",
        dataType: "script"
      });
}

// Set the function above to run every 2 seconds
var i = setInterval(updateProgress, 2000);

并更新 get_progress.js.erb：

$("#progress").text("<%= @progress.to_s %>");
var checkprogress = <%= @progress.to_i %>;
if (checkprogress == 100) {
   // Stop the function running. Should add clearInterval to error handling of ajax also
   clearInterval(i);
}

编辑

如果解压缩操作的提交和检索进度之间存在某种冲突，我建议您使用remotipart 使解压缩提交异步进行。然后将解压缩的形式更改为：

<% form_tag '/unzip', :html => { :multipart => true }, :remote => true do %>

并根据远程自述文件添加带有<%= remotipart_response do %> 的create.js.erb 文件。我仍然建议 get_progress ajax 调用是一个 get 方法。