在表单提交时添加 jquery 预加载器

Question

我使用 jquery 和 AJAX 异步提交表单。请参阅下面的代码，

$("#save_report").click(function()
                {
                    $.ajax({
                        url : actionOfForm,
                        type : $('#custom_targeting_param_form').attr("method"),
                        data : $('#custom_targeting_param_form').serialize(),
                        success : function(){
                            alert('Report Saved successfully');
                            $("#showOrExportCustomTargetingReport").val('showReport');  
                        }
                    });
                    return false;
                });

我的 html 中有一个 ID 为 save_report 的链接，单击该链接时，将对作为 actionOfForm 传递的 URL 进行 Ajax 调用变量如上所示。

直到这一切都很好。但现在我想在后台提交表单时获得像 loading.. 这样的预加载器图像/文本。我想在警报框中显示它，而不是在我的 html 上...

因为我是新用户，很抱歉无法发布图像，但我希望我可以理解

一旦提交表单完成后，预加载器图像将消失并替换为成功消息警报。

你能帮我解决这个问题吗？

Answer 1

我认为你可以将你的图像放在一个 div 中..最初隐藏它..

<div id="imgDiv" style="display:none"><img src="/img.png"/><div>

然后单击你的链接（在 AJAX 调用上）..在页面顶部显示此 div（你必须为此使用一些 css 属性）。喜欢这-

$("#save_report").click(function()
                {
                    $('#imgDiv').show();// show your loading image
                 $.ajax({
                        url : actionOfForm,
                        type : $('#custom_targeting_param_form').attr("method"),
                        data : $('#custom_targeting_param_form').serialize(),
                        success : function(){
                            alert('Report Saved successfully');
                            $('#imgDiv').hide();// hide your image after successful call 
                             $("#showOrExportCustomTargetingReport").val('showReport');  
                        }
                    });
                    return false;
                });