我有一个表单，当我点击保存按钮时我想显示一个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 } }); }); 所以我需要一些帮助，请找出它为什么不起作用。
尝试
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
下面有一些小调整。 不完全确定您的总体目标是什么，但注意到以下问题：
笔记：
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 } }); });
你需要显示“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 },
以上就是jQuery教程分享jQuery加载器gif和警报消息相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/561786.html