小编典典

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

ajax

以前,在Rails 2.3.8中,我使用了原型帮助器link_to_remoteform_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') %>)

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

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


阅读 258

收藏
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