我有一个表格，当我点击保存按钮，我想显示一个GIF装载机，然后执行一个AJAX功能（从jQuery的）来调用一个文件，该文件将保存表单时，如果它是一个成功的，我要删除的GIF加载器，并显示一条消息，说的形式保存成功。

I have a form, when I click on the save button I would like to display a gif loader, then execute a ajax function (from jquery) to call a file which will save the form, the if it's a success, I want to remove the gif loader and display a message to say the form was successfully saved.

这并不难......除了我; O）

It's not hard... except for me ;o)

下面我code。在捣鼓： http://jsfiddle.net/WnZ3Y/

Here my code in fiddle: http://jsfiddle.net/WnZ3Y/

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

所以，我需要一些帮助，请找出为什么它不能正常工作。

So I need some help, please, to find why it doesn't work.

推荐答案

尝试

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=https://m.xsw88.com/allimgs/daicuo/20230910/1333.png.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
                }
            });
        });
    });

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