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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3501317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:32:48  来源:igfitidea点击:

rails3 rails.js and jquery catching success and failure of ajax requests

jqueryruby-on-railsajaxruby-on-rails-3

提问by nathanvda

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

以前,在 rails 2.3.8 中,我使用了原型助手link_to_remoteform_remote_for(除其他外)。

These had the option :updateas follows:

这些选项:update如下:

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

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

文档中的示例)。此示例将在成功时使用“cart”类更新 html 元素,并在失败时使用“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

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

并且没有选项可以设置:update了。我们现在渲染 javascript,而不是普通的 html,就像这样(在 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?

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

回答by nathanvda

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

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

  • ajax:loading : triggered before executing the AJAX request
  • ajax:success : triggered after a successful AJAX request
  • ajax:complete : triggered after the AJAX request is complete, regardless the status of the response
  • ajax:failure : triggered after a failed AJAX request, as opposite to ajax:success
  • ajax:loading : 在执行 AJAX 请求之前触发
  • ajax:success : AJAX 请求成功后触发
  • ajax:complete : AJAX 请求完成后触发,无论响应状态如何
  • ajax:failure : 在 AJAX 请求失败后触发,与 ajax:success 相反

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

由于 javascript 应该是不显眼的,这种耦合不是在 HTML 中完成的。

An example (from the same site) : the following Rails 2.3.8

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

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

is translated to this :

翻译成这样:

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

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

在一些 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);
    });
});

Great! :)

伟大的!:)

[UPDATE: 29/12/2011]

[更新:29/12/2011]

Two events have been renamed lately:

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

  • ajax:beforeSend: replace the late ajax:loading
  • ajax:errorreplaces the ajax:failure(I guess to be more in line with jQuery itself)
  • ajax:beforeSend: 换晚了 ajax:loading
  • ajax:error替换ajax:failure(我想更符合 jQuery 本身)

So my example would become:

所以我的例子会变成:

  $("#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) {})

回答by ncherro

I know this question is 3 years old, but it comes up high in Google results and some of the events listed above are not used anymore.

我知道这个问题已经有 3 年历史了,但它在 Google 搜索结果中排名靠前,并且上面列出的一些事件不再使用。

See here for a current list - https://github.com/rails/jquery-ujs/wiki/ajax

在这里查看当前列表 - https://github.com/rails/jquery-ujs/wiki/ajax