Question

我想改进我的应用程序中的AJAX反馈（在我的模态中发布远程表单等之后）。

我已经有一些很好的反馈显示加载动画

$(document).ajaxStart(function(){
    $('.loading-feedback').show()
})

$(document).ajaxStop(function(){
    $('.loading-feedback').hide()
})

但我意识到这还不够：当我的AJAX请求触发Completed 500 Internal Server Error in 1985ms时...用户没有真正的事情发生。

例如，我希望在我的前端显示一条警告信息。

我已经有一些代码可以显示我存储在AJAX响应中的一些flash消息，我想为此重复使用（例如，通过显示oops, your AJAX request triggered a #{err_code} #{err_description}. Please tell the devs :D

我有以下代码成功显示AJAX请求后的引导闪存（闪存的内容/类型在我的控制器中定义）

application_controller.rb

after_filter :ajax_flash
def ajax_flash
  return unless request.xhr?

  if type = priority_flash
    response.headers['X-Message'] = flash[type]  
    response.headers['X-Message-Type'] = type.to_s

    flash.discard  # don't want the flash to appear when you reload page
  end
end

相关的javascript

$(document).ajaxComplete(function(e, request, opts) { 
    fireFlash(request.getResponseHeader('X-Message'), request.getResponseHeader('X-Message-Type')); 
    # Where fireFlash is a function that displays a bootstrap alert
});

但是现在，如果出现错误，我的控制器操作将会返回。是否可以检测到这一点，例如填充闪光灯

flash[:fatal] = "oops, your AJAX request triggered a #{err_code} #{err_description}. Please tell the devs :D"

那会显示在我的前端吗？（请注意，我不知道在哪里可以找到err_code和err_description）

Answer 1

您不需要使用Ajax来创建Flash消息。

由于Flash消息是非持久性的并且在呈现时从会话中删除，因此您可以通过修改文档来创建新的Flash消息。

这是一个最小的Flash实现：

$(document).on('flash', function(e, key, message){
    var $flash = $('<li class="alert flash js-created"></li>')
        .addClass("alert-" + key)
        .html(message);

    $(this).find('.flashes').append($flash);
});

Turbolinks会清除闪光灯，因为它取代了整个<body>。

您可以使用ajaxError代替ajaxStop添加全局ajax失败处理程序。

var $doc = $(document);
$doc.ajaxError(function(event, jqxhr, settings, thrownError){
   $doc.trigger('flash', ['error', jqxhr.status + thrownError]);
});

Answer 2

以这种方式使用它。

$loader.fadeIn();

jqXHR = $.ajax({
          url: "",
          type: "POST",
          data: {},
          dataType: "json"
        });

jqXHR.done(function( response ) {

});

jqXHR.fail(function( jqXHR, textStatus ) {
      console.log( "Request failed: " + textStatus );
});

jqXHR.always(function( jqXHR, textStatus ) {
      $loader.fadeOut();
});

Rails AJAX反馈，尤其是错误

2 个答案: