jQuery加载程序gif和警报消息

我有一个表单，当我点击save按钮时，我想显示一个gif加载器，然后从jquery执行一个ajax函数来调用一个文件来保存表单，如果成功，我想删除gif加载器并显示一条消息，说明表单已成功保存

这并不难。。。除了我；o

这里是我的小提琴代码：

---

因此，我需要一些帮助，请找出它不起作用的原因。

下面的一些小调整。不确定您的总体目标是什么，但注意到以下问题：

注:

对于错误案例，您使用的是ajax装入器内部，而不是ajax装入器内部。 在替换内容之前，您不会等待淡出。淡出是异步的，但延迟只会延迟后续动画，而不会延迟淡出开始之前发生的html替换。我使用animation promise上的done链接了延迟，当动画队列结束时（包括延迟调用）将触发该延迟。您最好在那里设置一个简单的超时。 您需要淡入淡出或显示初始加载程序，因为它被以前的保存/错误隐藏。 JSFiddle：

---

您需要显示ajaxLoader内部分区：

    beforeSend : function() { // traitements JS à faire AVANT l'envoi
        $('#ajaxLoader-inner').show();
        $('#ajaxLoader-inner').html('Here my loader GIF'); // add a gif loader  
    },

试一试

html

js

---

你知道Blockui吗？那将对你有很大帮助。这里有很多我想要的网站，毫无疑问。请澄清。有控制台错误吗？你的fiddle没有多大帮助，因为它没有设置为实际运行。它看起来很有趣，但我更喜欢避免在代码中添加其他插件。我想要很多？？？只有一次，我会；o。我的JSFIDLE工作正常，这是我得到的结果，我在第一条消息中描述了我正在等待的过程。。。正如您在JSFIDLE中看到的那样，结果并不好：第一次单击按钮时，它似乎可以工作，但第二次却一团糟！因此，毫无疑问，我只需要帮助。注意：对于错误案例，您使用的是ajax装入器内部，而不是ajax装入器内部。在替换内容之前，您不会等待淡出。淡出是异步的，但延迟只会延迟后续的动画，而不会延迟淡出开始之前发生的html替换。非常感谢您的帮助。

$("button#Save").click(function () {
    $.ajax({
        type: "POST",
        url: "",
        data: $('').serialize(),
        beforeSend: function () { // traitements JS à faire AVANT l'envoi
            $('#ajaxLoader-inner').html('Here my loader GIF').fadeIn(); // add a gif loader  
        },
        success: function () {
            $('#ajaxLoader-inner').fadeOut('slow').delay(2000).promise().done(function () {
                $('#ajaxLoader-inner').html('<div class="alert alert-success alert-dismissable" id="ajax-loader-message"><i class="fa fa-check"></i><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Saved with success.</div>').fadeIn('slow').delay(2000).fadeOut('slow'); // add a message to say it's a success
            });
        },
        error: function () {
            alert("Error in ajax."); // alert there is an error
            $('#ajaxLoader-inner').fadeOut(); // remove GIF loader
        }
    });

});

    beforeSend : function() { // traitements JS à faire AVANT l'envoi
        $('#ajaxLoader-inner').show();
        $('#ajaxLoader-inner').html('Here my loader GIF'); // add a gif loader  
    },

<form id="ajaxLoader">
    <div id="ajaxLoader-inner"></div>
    <input id="inputs" name="saved" type="text" placeholder="save" />
    <input type="button" id="Save" value="click" />
</form>

   $(function () {
        $("#Save").click(function (e) {
            e.preventDefault();
            var _data = $("#ajaxLoader input[type=text]").val();
            return $.ajax({
                type: "POST",
                url: "/echo/json/",
                data: {
                    json: JSON.stringify({"saved" : _data})
                },
                beforeSend: function () { // traitements JS à faire AVANT l'envoi
                    $('#ajaxLoader-inner')
                    .html('<img src=http://upload.wikimedia.org/'
                          + 'wikipedia/commons/thumb/d/d3/'
                          + 'Newtons_cradle_animation_book_2.gif/'
                          + '200px-Newtons_cradle_animation_book_2.gif />'); // add a gif loader  
                },
                success: function (data, textStatus, jqxhr) {
                    alert(JSON.stringify(data));
                    $('#ajaxLoader-inner img').fadeOut(5000, function () { // remove GIF loader
                        $(this)
                        .replaceWith('<div class="alert alert-success alert-dismissable"'
                        + ' id="ajax-loader-message">'
                        + '<i class="fa fa-check"></i>'
                        + '<button type="button" class="close"'
                        + ' data-dismiss="alert" aria-hidden="true">×'
                        + '</button>Saved with success.</div>') 
                        && $(".alert").fadeIn(0).fadeOut(3700)
                           .parent().siblings("#inputs").val("");
                    }) // add a message to say it's a success
                },
                error: function () {
                    alert("Error in ajax."); // alert there is an error
                    $('#ajax-loader-inner').fadeOut(); // remove GIF loader
                }
            });
        });
    });