成功调用AJAX后,Toast Growl不会出现

Toastr Growl is not showing up after a successful AJAX call

本文关键字:Growl Toast 调用 AJAX 成功      更新时间:2024-04-09

通过我的JavaScript代码,我可以获得错误URL的警报,但当成功POST时,我可以通过alert调用显示response.id,但不使用我用于错误URL逻辑的烤面包机咆哮。我是不是错过了什么?

<link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<script type="text/javascript">
    $(function () {
        $('#submit').click(function () {
            var txt = $('#url').val();
            var re = /(http(s)?:'')?(['w-]+'.)+['w-]+[.com|.in|.org]+('['?%&=]*)?/
            if (!re.test(txt)) {
                toastr.options = {
                    "closeButton": false,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": false,
                    "positionClass": "toast-bottom-center",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                };
                toastr["error"]("Invalid URL!");
                $('#url').val('');
                return false;
            }
            $.ajax({
                url: "{{ url_for('api.start_status') }}",
                type: 'POST',
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify({"url": txt}),
                success: function (response) {
                    var meme = response.id;
                    toastr(meme);
                }
            });
        });
    });
</script>

UPDATE#1:正如建议的那样,这是现在的代码,它仍然显示出相同的行为。确认它在SAFARI中也不起作用,所以至少有两个浏览器显示了相同的问题。

<link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<script type="text/javascript">
    $(function () {
        toastr.options = {
            "closeButton": false,
            "debug": true,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-bottom-center",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
        $('#submit').click(function () {
            var txt = $('#url').val();
            var re = /(http(s)?:'')?(['w-]+'.)+['w-]+[.com|.in|.org]+('['?%&=]*)?/
            if (!re.test(txt)) {
                toastr["error"]("Invalid URL!");
                $('#url').val('');
                return false;
            }
            $.ajax({
                url: "{{ url_for('api.start_status') }}",
                type: 'POST',
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify({"url": txt}),
                success: function (response) {
                    toastr.success("Invalid URL 2!");
                    var meme = response.id;
{#                        alert(meme);#}
                }
            });
        });
    });
</script>

因此,无论是否存在格式错误的url或成功的ajax调用,您都希望显示相同的toast。

如果我理解正确,那么当我查看您的代码时,您似乎只在regex.test不成功的情况下才放入tover.options

为了测试,我会将选项移到if(!re.test…)之外?