Rails AJAX反馈，尤其是在出现错误时

Rails AJAX Feedback, especially on error

本文关键字：错误 尤其是 AJAX 反馈 Rails      更新时间：2023-09-26

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

我已经有一些不错的反馈显示加载动画

$(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）

您不需要使用Ajax来创建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]);
});

这样使用它。

$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();
});
相关文章：