Ajax 在重定向时显示消息

Question

在我的 ajax 调用中，如果成功，我想重定向到另一个 URL 并显示由 toastr 形成的消息。

这是我的 ajax：

var redirectUrl = '@Url.Action("Index", "Informations")';

bootbox.confirm({
    title: "Delete?",
    message: "Are you sure you want to delete this?",
    buttons: {
        cancel: {
            label: '<i class="fa fa-times"></i> Cancel'
        },
        confirm: {
            label: '<i class="fa fa-check"></i> Confirm'
        }
    },
    callback: function(result) {
        if (result) {
            toastr.options = {
                timeOut: 5000
            }

            $.ajax({
                url: "/api/Informations/" + btn.attr("data-id"),
                method: "DELETE",
                success: function () {
                    window.location.href = redirectUrl;
                    toastr.success("Successfully deleted");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    var status = capitalizeFirstLetter(textStatus);

                    toastr.error(status + " - " + errorThrown, "Sorry, something went wrong.");
                 }
             });
         }
      }
  });

现在问题肯定是调用 toastr.success 方法之前的重定向.. 那么如何在新页面上显示成功消息？

Answer 1

您可以使用 toastr 提供的回调，可能是 onclick 或 onHidden：

toastr.options.onShown      = function() { window.location.href = redirectUrl; }
toastr.options.onHidden     = function() { window.location.href = redirectUrl; }
toastr.options.onclick      = function() { window.location.href = redirectUrl; }
toastr.options.onCloseClick = function() { window.location.href = redirectUrl; }

一个例子：

$('.hej').click(function(e) {
  e.preventDefault();
  toastr.options.onHidden = function() { console.log('I\'m hidden'); }
  toastr.options.onclick = function() { console.log('You clicked me'); }
  toastr.success('Have fun storming the castle!', 'Miracle Max Says');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codeseven.github.io/toastr/build/toastr.min.js"></script>
<link href="http://codeseven.github.io/toastr/build/toastr.min.css" rel="stylesheet"/>

<a href="#" class="hej">Click me!</a>

在你的情况下，它可能是这样的：

<script>
  ...
  $.ajax({
    url: "/api/Informations/" + btn.attr("data-id"),
    method: "DELETE",
    success: function () {
      toastr.options.onHidden = function() { window.location.href = redirectUrl; }
      toastr.success("Successfully deleted");
    },
    error: function(jqXHR, textStatus, errorThrown) {
      var status = capitalizeFirstLetter(textStatus);
      toastr.error(status + " - " + errorThrown, "Sorry, something went wrong.");
     }
  });
  ...
</script>

更新：如果您想要在新页面中显示一条消息，您已经重定向，那么您可以通过 url 将该消息作为参数传递：

toastr.options.onHidden = function() { window.location.href = redirectUrl + '?message=any_message'; }

而且我意识到必须在分配 toastr.success 之前设置选项。