jquery - Rails3 Rails.js 和 jquery 捕获ajax请求的成功和失败

Question

之前，在 Rails 2.3.8 中，我使用了原型(prototype)帮助器 link_to_remote 和 form_remote_for (以及其他)。

它们具有选项:update，如下所示:

link_to_remote "Add to cart",
  :url => { :action => "add", :id => product.id },
  :update => { :success => "cart", :failure => "error" }

(来自 documentation 的示例)。此示例将在成功时使用类“cart”更新 html 元素，在失败时更新类“error”。

现在我相信操作方式已经改变，我们这样写:

link_to "Add to cart", :url => {:action => "add", :id => product.id}, 
    :remote => true

并且不再有设置:update的选项。我们现在渲染 javascript，而不是普通的 html，如下所示(在 jquery 中):

$('.cart').replaceWith(<%= escape_javascript(render :partial => 'cart') %>)

但是如何处理错误情况呢？我是否在 Controller 中处理它并使用单独的 View ？

对我来说，能够以某种方式模仿我们以前的行为似乎很有用。有什么想法吗？

Answer 1

哈!我发现它在 this 中有描述文章。在rails.js 中检查以下回调:

• ajax:loading:在执行AJAX请求之前触发
• ajax:success:AJAX请求成功后触发
• ajax:complete :AJAX 请求完成后触发，无论响应状态如何
• ajax:failure :AJAX 请求失败后触发，与 ajax:success 相反

由于 JavaScript 应该不引人注目，因此这种耦合不在 HTML 中完成。

示例(来自同一站点):以下 Rails 2.3.8

<% form_remote_tag :url => { :action => 'run' },
        :id => "tool-form",
        :update => { :success => "response", :failure => "error" },
        :loading => "$('#loading').toggle()", :complete => "$('#loading').toggle()" %>

翻译成这样:

<% form_tag url_for(:action => "run"), :id => "tool-form", :remote => true do %>

在一些 javascript (application.js) 中，您绑定(bind)事件

jQuery(function($) {
  // create a convenient toggleLoading function
  var toggleLoading = function() { $("#loading").toggle() };

  $("#tool-form")
    .bind("ajax:loading",  toggleLoading)
    .bind("ajax:complete", toggleLoading)
    .bind("ajax:success", function(xhr, data, status) {
      $("#response").html(status);
    });
});

太棒了! :)

[更新:2011 年 12 月 29 日]

最近有两个事件已重命名:

• ajax:beforeSend:替换后期的ajax:loading
• ajax:error 替换了 ajax:failure (我想更符合 jQuery 本身)

所以我的例子将变成:

  $("#tool-form")
    .bind("ajax:beforeSend",  toggleLoading)
    .bind("ajax:complete", toggleLoading)
    .bind("ajax:success", function(xhr, data, status) {
      $("#response").html(status);
    });

为了完整起见，事件及其预期参数:

 .bind('ajax:beforeSend', function(xhr, settings) {})
 .bind('ajax:success',    function(xhr, data, status) {})
 .bind('ajax:complete', function(xhr, status) {})
 .bind('ajax:error', function(xhr, data, status) {})