jQuery 在等待 ajax 响应时显示加载 gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19313319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show loading gif while waiting for ajax response
提问by ebruszl
I have a seat chart. When i click a seat, i want to show a loading gif. Seat chart comes from svg document. Seats are svg elements. When ajax response returned, i want to hide loading gif. I wrote code below but it doesnt work.
我有座位表。当我点击一个座位时，我想显示一个正在加载的 gif。座位图来自 svg 文档。座位是 svg 元素。当ajax响应返回时，我想隐藏加载gif。我在下面写了代码，但它不起作用。
<section>
<div class="parent" style="text-align: center;">
<div class="panzoom" style="width: 500px; height:375px;">
<div class="loading" style="display:none" id="loading"><img src="../../Scripts/spinner.jpg" style="width:200px; padding-left:175px;"/></div>
</div>
</div>
<div class="seperator"></div>
<div class="buttons" style="text-align:center;">
<input type="range" class="zoom-range">
<a class="button reset">S?f?rla</a>
</div>
<script>
$(function () {
var $section = $('section').first();
$section.find(".panzoom").svg({
loadURL: "https://resources-biletino.s3.amazonaws.com/content/venue/17/seatChart-01.svg",onLoad:function(){
initAll();
}
});
$section.find(".panzoom").panzoom({
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
cursor: "auto",
increment: 0.6
});
});
function seatObject(id, label, status, token){
this.id = id;
this.label = label;
this.status = status;
this.token = token;
}
var seats = [];
function initAll(){
$(".seatObj").each(function(){
var id = $(this).attr("id");
var temp = new seatObject("#" + id, "label" + id, "available", "");
seats[id] = temp;
$(this).click(function () {
var currentSeat = $(this).attr("id");
$("#loading").show();
if (seats[currentSeat].status == "selected")
{
dequeueSeat(currentSeat);
}
else
{
enqueueSeat(currentSeat);
//alert($(this).attr("inkscape:label"));
}
});
});
$.ajax({
type: "GET",
url : "@Url.Action("GetFullSeats","Event")",
data:{layoutID:'@Model.LayoutID'},
dataType : "json",
success:function(result)
{
var uintArray = Base64Binary.decode(result);
for (var i = uintArray.length - 1; i >= 0; i--)
{
if (uintArray[i] > 0)
{
for (var j = 0; j < 8; j++)
{
if ((uintArray[i] & Math.pow(2, j)) == Math.pow(2, j))
{
seats[(((2047 - i) * 8) + j)].status = "sold";
}
}
}
}
drawSeats();
}
});
$.ajax({
type: "GET",
url : "@Url.Action("GetQueuedSeats", "Event")",
data:{
layoutID:'@Model.LayoutID'
},
dataType : "json",
success:function(result){
var queuedSeats = result.split(",");
$("#loading").hide();
for (var i = 0; i < queuedSeats.length; i++)
{
if (queuedSeats[i] != ""){
seats[queuedSeats[i]].status = "queued";
}
}
drawSeats();
}
});
}
function drawSeats(){
for (var i = 0; i < seats.length; i++)
{
if (seats[i].status == "available")
{
$(seats[i].id).css('fill','#888888');
}
if (seats[i].status == "sold")
{
$(seats[i].id).css('fill','#ff4848');
}
if (seats[i].status == "queued")
{
$(seats[i].id).css('fill','#F0B702');
}
if (seats[i].status == "selected")
{
$(seats[i].id).css('fill','#00c865');
}
}
}
function enqueueSeat(currentSeat){
$.ajax({
type: "GET",
url: "@Url.Action("EnqueueSeat", "Event")",
data:{
selectionGUID:"@(selectionGUID)",
seatID: currentSeat,
layoutID:'@(Model.LayoutID)'
},
dataType:"json",
success:function(data){
if(data != "")
{
seats[currentSeat].status = "selected";
seats[currentSeat].token = data;
}
drawSeats();
}
});
}
function dequeueSeat(currentSeat){
$.ajax({
type: "GET",
url: "@Url.Action("DequeueSeat", "Event")",
data:{
reservationToken:seats[currentSeat].token
},
dataType:"json",
success:function(data){
if(data)
{
seats[currentSeat].status = "available";
seats[currentSeat].token = "";
}
drawSeats();
}
});
}
</script>
</section>
回答by Gung Foo
You can just bind 2 functions to ajaxStart()and ajaxStop()respectively.
您可以分别将 2 个函数绑定到ajaxStart()和ajaxStop()。
.ajaxStart()
.ajaxStart()
Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
注册第一个 Ajax 请求开始时要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()
.ajaxStop()
Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
注册一个在所有 Ajax 请求完成后调用的处理程序。这是一个 Ajax 事件。
$.ajaxStart(function () {
$('#loading').show(); // show loading indicator
});
$.ajaxStop(function()
{
$('#loading').hide(); // hide loading indicator
});
These will be automatically called when Ajax requests begin or end.
这些将在 Ajax 请求开始或结束时自动调用。
回答by Hussain Akhtar Wahid 'Ghouri'
try this plug in
试试这个插件
<script>
// wait for the DOM to be loaded
$(document).ready(function()
{
// bind 'myForm' and provide a simple callback function
$("#tempForm").ajaxForm({
url:'../calling action or servlet',
type:'post',
beforeSend:function()
{
alert("perform action before making the ajax call like showing spinner image");
},
success:function(e){
alert("data is"+e);
alert("now do whatever you want with the data");
}
});
});
</script>
and keep this inside your form
并将其保存在您的表单中
<form id="tempForm" enctype="multipart/form-data">
<input type="file" name="" id="" />
</form>
and you can find the plug in here
你可以在这里找到插件
