jquery - 当我通过ajax调用单击保存按钮时显示图像指示器？

Question

我正在使用 .net MVC 3。我有一个 AJAX 调用来保存问卷答案，我需要一些类似于加载图标的图像指示器来向用户显示它已保存。

 <input id="SaveAccount"
        type="button"
        onclick="saveQuestioniare();"
        value=""
        alt="save account" title="save account" />

我的 AJAX 调用：

 function saveQuestioniare() {
           var formData = $("#SignupForm").serializeArray();
           $.ajax({
            url: '/Question/SaveQuestionaire?id=@ViewData["reviewId"]',
            type: 'POST',
            cache: false,
            dataType: 'json',
            data: formData,
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
            success: function (json) {
                alert("Saved");
            }
        });
    }

Answer 1

不要使用额外的插件，你可以通过 css 和 js 10 行代码而不是 300/400 或更多代码轻松完成

首先将您的图像设置为您想要的位置，例如：

<img src="...path to img" id="myimg" alt=""/>

#myimg{
margin:0;
position:relative;
top:20%;
bottom:20%;
left:0;
right:0;
display:none;
}

然后在js中做

$.ajax({ ....
beforeSend:function(){
$('#myimg').show();
},
success:function(){
$("#myimg").hide();
}
...});

Answer 2

使用阴影框，如Lightbox，一个 jQuery 插件，并触发它指向您最喜欢的“微调器”图像以指示加载，然后在“成功”处理程序中关闭它。