rails3 rails.js和jquery捕获ajax请求的成功和失败

小编典典

rails3 rails.js和jquery捕获ajax请求的成功和失败

ajax

以前，在Rails 2.3.8中，我使用了原型帮助器link_to_remote和form_remote_for（以及其他）。

这些选项:update如下：

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

（来自文档的示例）。此示例将在成功后用类“
cart”更新html元素，而在失败时将类“ error”更新。

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

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

并且没有设置选项:update了。现在，代替普通的html，我们渲染javascript，如下所示（在jquery中）：

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

但是您如何处理错误情况？我可以在控制器中处理它，并使用单独的视图吗？

以某种方式模仿我们以前的行为对我来说似乎很有用。有任何想法吗？

阅读 265

2020-07-26

共1个答案

小编典典

哈！我发现它在描述这个文章。在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）中，将事件绑定

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) {})

2020-07-26