jQuery加载器gif和警报消息

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

这并不难…除了我; o）

这里我的代码在小提琴： 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('
×Saved with success.
').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

尝试

HTML

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(''); // add a gif loader }, success: function (data, textStatus, jqxhr) { alert(JSON.stringify(data)); $('#ajaxLoader-inner img').fadeOut(5000, function () { // remove GIF loader $(this) .replaceWith('
' + '' + '×' + 'Saved with success.
') && $(".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/

Answer 2

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

笔记：

• 对于错误情况，您有#ajax-loader-inner而不是#ajaxLoader-inner 。
• 在替换内容之前，您不是在等待淡出。 fadeOut是异步的，但delay只会延迟后续动画 ，而不是html()替换（在fadeOut开始之前发生）。 我在动画promise上使用done进行了延迟，这将在动画队列结束时触发（包括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('
×Saved with success.
').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 3

你需要显示“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 },