如何在 toastr 通知后重定向

Posted 2023-05-08

【中文标题】如何在 toastr 通知后重定向

【英文标题】：How can I redirect after toastr notification

【发布时间】：2017-01-09 11:02:22

【问题描述】：

我正在尝试在 toastr 通知完成显示后重定向。我目前有 ajax 请求作为

 $.ajax(
            headers: 
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('value')
            ,
            type: $(form).attr('method'),
            url: $(form).attr('action'),
            data: $(form).serialize(),
            dataType: 'json',
            success: function (data) 
                toastr.success('Hello','Your fun',timeOut: 2000,preventDuplicates: true, positionClass:'toast-top-center');


                     return window.location.href = '/';

            ,
            error: function (data) 
                    var html = '<div class="alert alert-danger">Email/Password is invalid</div>';
                    $('#loginMsg').html(html);
            

问题在于它显示了通知，但会快速重定向到实际阅读通知。如何仅在 toastr 通知隐藏后重定向？

【问题讨论】：

如果您仍然要重定向，那么发出 AJAX 请求并显示通知的想法似乎完全是多余的。

为什么这是多余的。一个人登录并在重定向到主页之前显示成功登录的通知。我在很多网站上都看到过这个。但即使是多余的，这也不是我问题的真正目的。

好的，首先回答问题，使用onHidden回调。请参阅文档的“回调”部分：github.com/CodeSeven/toastr。其次，如果您仍然要重定向，则发出 AJAX 请求然后显示通知是多余的。而不是发出一个请求，而是发出两个请求，并在用户等待通知消失时阻止他们。当您成功提供凭据后页面发生变化这一事实足以让用户知道他们已登录。

感谢您提供的信息，但我现在正在测试 toastr，我可能不会使用它来登录。只是测试，但你说得很好。\

【参考方案1】：

toastr 提供回调选项

toastr.options.onShown = function() console.log('hello'); toastr.options.onHidden = function() console.log('goodbye'); toastr.options.onclick = function() console.log('clicked'); toastr.options.onCloseClick = function() console.log('close button clicked');

在函数内部你可以使用重定向 URL

这取决于您使用的插件check here

【参考方案2】：

希望对你有帮助

$.ajax(
        headers: 
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('value')
        ,
        type: $(form).attr('method'),
        url: $(form).attr('action'),
        data: $(form).serialize(),
        dataType: 'json',
        success: function(data) 
            toastr.success('Hello', 'Your fun', 
                timeOut: 2000,
                preventDuplicates: true,
                positionClass: 'toast-top-center',
                // Redirect 
                onHidden: function() 
                    window.location.href = '/';
                
            );
        ,
        error: function(data) 
            var html = '<div class="alert alert-danger">Email/Password is invalid</div>';
            $('#loginMsg').html(html);
        
    );

【讨论】：

请解释它的帮助