Question

我有一个表单，当我点击保存按钮时我想显示一个gif加载器，然后执行一个ajax函数（来自jquery）来调用一个保存表单的文件，如果它是＆＃39; sa成功，我想删除gif加载器并显示一条消息，表示表单已成功保存。

它并不难......除了我; o）

$("button#Save").click(function(){                                     
    $.ajax({
        type: "POST",
        url: "",
        data: $('').serialize(),
        beforeSend : function() { // JS code processing before calling the AJAX method
            $('#ajaxLoader-inner').html('Here my loader GIF'); // add a gif loader  
        },
        success: function(){
            $('#ajaxLoader-inner').fadeOut('slow').delay(2000); // remove GIF loader
            $('#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
            $('#ajax-loader-inner').fadeOut(); // remove GIF loader
        }
    });
});

所以我需要一些帮助，请找出它为什么不起作用。

Answer 1

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

注意：

对于错误情况，您有#ajax-loader-inner而不是#ajaxLoader-inner。
在替换内容之前，您不是在等待淡出。 fadeOut是异步的，但delay只会延迟后续动画，而不是html()替换（在fadeOut开始之前发生）。我在动画done上使用promise链接延迟，这将在动画队列结束时触发（包括delay次调用）。使用简单的setTimeout可能会更好。
您需要淡入（或显示）初始加载器，因为它已被先前的保存/错误隐藏。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/WnZ3Y/2/

$("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
        }
    });

});

Answer 2

你需要显示“ajaxLoader-inner”DIV：

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

Answer 3

尝试

HTML

<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>

JS

   $(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
                }
            });
        });
    });

jsfiddle http://jsfiddle.net/guest271314/6tpT6/

jQuery加载器gif和警报消息

3 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/WnZ3Y/2/