显示加载GIF，等待Ajax响应 [英] Show loading gif while waiting for ajax response
本文介绍了显示加载GIF，等待Ajax响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个座位图。当我点击一个座位，我想说明一个加载GIF。座位图表来自SVG文件。座位SVG元素。当Ajax响应回来后，我想隐藏加载GIF。我写了code以下，但它不工作。
＆lt;节＆GT;
＆LT; DIV CLASS =父母的风格=文本对齐：中心;＆GT;
＆LT; DIV CLASS =panzoom的风格=宽度：500px的;高度：375px;＆GT;
＆LT; DIV CLASS =装的风格=显示：无ID =加载＆GT;＆LT; IMG SRC =../../脚本/ spinner.jpg的风格=宽度：200像素;填充左：为175px;/＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =分隔符＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =按钮的风格=文本对齐：中心;＆GT;
＆LT;输入类型=范围级=缩放范围＆GT;
＆LT;一类=键复位＆GT;Sıfırla＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT;脚本＆GT;
$（函数（）{
变量$节= $（'部分'）第（）。
$ section.find（。panzoom）。SVG（{
使用loadURL：https://resources-biletino.s3.amazonaws.com/content/venue/17/seatChart-01.svg的onLoad：函数（）{
initAll（）;
}
}）;
$ section.find（。panzoom）。panzoom（{
$ zoomRange：$ section.find（变焦范围。）
$复位：$ section.find，（复位。）
光标：自动，
增加：0.6
}）;
}）;
功能seatObject（ID，标签，状态，令牌）{
this.id = ID;
this.label =标签;
this.status =状态;
this.token =令牌;
}
变种座椅= [];
传播initAll（）{
$（seatObj）。每个（函数（）{
VAR ID = $（本）.attr（ID）;
变种临时=新seatObject（＃+编号标签+ ID，可用，）;
席[ID] =温度;
$（本）。点击（函数（）{
VAR currentSeat = $（本）.attr（ID）;
$（＃加载）显示（）。
如果（席[currentSeat] .STATUS ==选择）
{
dequeueSeat（currentSeat）;
}
其他
{
enqueueSeat（currentSeat）;
//alert($(this).attr("inkscape:label））;
}
}）;
}）;
$阿贾克斯（{
键入：GET，
网址：@ Url.Action（GetFullSeats，事件），
数据：{layoutID：@ Model.LayoutID}，
数据类型：JSON，
成功：函数（结果）
{
VAR uintArray = Base64Binary.de code（结果）;
对于（VAR I = uintArray.length - 1; I＆GT; = 0;我 - ）
{
如果（uintArray [I] 0）
{
对于（VAR J = 0; J＆LT; 8，J ++）
{
如果（（uintArray [1] - 安培; Math.pow（2，j）的）== Math.pow（2，j））后
{
。座位[（（（2047 - I）* 8）+ J）状态=卖;
}
}
}
}
drawSeats（）;
}
}）;
$阿贾克斯（{
键入：GET，
网址：@ Url.Action（GetQueuedSeats，事件），
数据：{
layoutID：@ Model.LayoutID
}，
数据类型：JSON，
成功：函数（结果）{
变种queuedSeats = result.split（，）;
$（＃加载）隐藏（）。
对于（VAR I = 0; I＆LT; queuedSeats.length;我++）
{
如果（queuedSeats [I]！=）{
。座位[queuedSeats [I]状态=排队;
}
}
drawSeats（）;
}
}）;
}
功能drawSeats（）{
对于（VAR I = 0; I＆LT; seats.length;我++）
{
如果（席[I] .STATUS ==可用）
{
$（席[I] .ID）的.css（'补'，'＃888888'）;
}
如果（席[I] .STATUS ==卖）
{
$（席[I] .ID）的.css（'补'，'＃ff4848'）;
}
如果（席[I] .STATUS ==排队）
{
$（席[I] .ID）的.css（'补'，'＃F0B702'）;
}
如果（席[I] .STATUS ==选择）
{
$（席[I] .ID）的.css（'补'，'＃00c865'）;
}
}
}
功能enqueueSeat（currentSeat）{
$阿贾克斯（{
键入：GET，
网址：@ Url.Action（EnqueueSeat，事件），
数据：{
selectionGUID：@（selectionGUID），
seatID：currentSeat，
layoutID：@（Model.LayoutID）'
}，
数据类型：JSON，
成功：功能（数据）{
如果（数据！=）
{
席[currentSeat] .STATUS =选择;
席[currentSeat] .token =数据;
}
drawSeats（）;
}
}）;
}
功能dequeueSeat（currentSeat）{
$阿贾克斯（{
键入：GET，
网址：@ Url.Action（DequeueSeat，事件），
数据：{
reservationToken：席[currentSeat] .token
}，
数据类型：JSON，
成功：功能（数据）{
如果（数据）
{
席[currentSeat] .STATUS =可用;
席[currentSeat] .token =;
}
drawSeats（）;
}
}）;
}
＆LT; / SCRIPT＆GT;
＆LT; /节＆gt;
解决方案
您只需2个功能结合到 ajaxStart（）和 ajaxStop（） 分别。
.ajaxStart（）
注册一个处理程序的第一个Ajax请求开始时被调用。 这是一个Ajax事件。
.ajaxStop（）
注册一个处理函数，当所有Ajax请求已完成被调用。 这是一个Ajax事件。
$。ajaxStart（函数（）{
$（'＃装载）显示（）。 //显示加载指示器
}）;
$ .ajaxStop（函数（）
{
$（'＃装载）隐藏（）。 //隐藏负荷指标
}）;
这些将在Ajax请求开始或自动调用结束。
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.
<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>
解决方案
You can just bind 2 functions to ajaxStart() and ajaxStop() respectively.
.ajaxStart()
Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
.ajaxStop()
Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
$.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.
这篇关于显示加载GIF，等待Ajax响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
