rails3 rails.js 和 jquery 捕获 ajax 请求的成功和失败 [英] rails3 rails.js and jquery catching success and failure of ajax requests

问题描述

以前，在 rails 2.3.8 中，我使用了原型助手 link_to_remote 和 form_remote_for(等等).

Previously, in rails 2.3.8 i used the prototype-helpers link_to_remote and form_remote_for (amongst others).

这些有选项 :update 如下:

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

(来自文档的示例).此示例将在成功时使用cart"类更新 html 元素，并在失败时使用error"类更新.

(an example from the documentation). This example would, upon success update the html-element with class "cart", and upon failure the class "error".

现在我相信作案手法已经改变，我们改为:

Now i believe the modus operandi has changed, instead we write:

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

并且没有选项可以设置 :update 了.我们现在渲染 javascript，而不是普通的 html，就像这样(在 jquery 中):

and there is no option to set :update anymore. Instead of a normal html, we now render javascript, like this (in jquery) :

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

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

but how do you handle an error situation? Do i handle it in my controller, and use seperate views?

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

It would seem useful to me to somehow be able to mimic the behaviour we had before. Any ideas?

推荐答案

哈！我发现它在这篇文章中有所描述.在 rails.js 中检查以下回调:

Ha! I found it described in this article. In rails.js the following callbacks are checked:

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

由于 javascript 应该是不显眼的，所以这种耦合不是在 HTML 中完成的.

As the javascript should be unobtrusive, this coupling is not done in the HTML.

一个例子(来自同一个站点):下面的 Rails 2.3.8

An example (from the same site) : the following 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) 中，你绑定事件

and inside some javascript (application.js), you bind the events

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

太好了！:)

[更新:29/12/2011]

[UPDATE: 29/12/2011]

最近重命名了两个事件:

Two events have been renamed lately:

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

• ajax:beforeSend: replace the late ajax:loading
• ajax:error replaces the ajax:failure (I guess to be more in line with jQuery itself)

所以我的例子会变成:

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

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

For completeness, the events and their expected parameters:

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

这篇关于rails3 rails.js 和 jquery 捕获 ajax 请求的成功和失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！