显示加载功能，直到JSON数据加载从API

-1

我使用$ .getJSON从API获取一些数据。一旦我收到信息，我会将信息附加到div上。但有时数据需要时间来加载，因此我想显示一个加载功能，直到东西被附加到div。我该怎么做呢？显示加载功能，直到JSON数据加载从API

function getApis(){ 
    var source = document.getElementById('toplace').value; 
    var dest = document.getElementById('fromplace').value; 
    var options = ""; 
    var container = document.getElementById('div-form'); 
    var disp_info = document.getElementById('train-info'); 
    // var train_block = document.getElementById("train-block"); 
    container.style.display = 'none'; 
    disp_info.style.display = 'inline-block'; 
    var url = "http://api.railwayapi.com/between/source/" + source + "/dest/" + dest +"/date/18-09/apikey/abvsl2868/"; 
    $.getJSON(url,function(data){ 
     console.log(data); 
     // I WANT TO DISPLAY A LOADING FUNCTIONALITY UNTIL THIS DATA IS APPEARING ON THE SCREEN 
     $("#train-info").append("Total Number of trains running from " + source + " to " + dest + " : " + data.total + "<br><br><br>"); 
     data.train.forEach(function(trains){ 
      options = "<div style='border:1px solid black;font-family:'Kaushan Script''> <br>Train Name : " + trains.name + "<br><br>" +"Train Number : " + trains.number + "<br><br>Departure Time : " + trains.src_departure_time + "<br><br> Arrival Time : " + trains.dest_arrival_time + "<br><br></div>"; 
      // $('#train-block').append(options + "<br>"); 
      $('#train-info').append(options + "<br>"); 
     }); 
    }); 
}

来源

2016-09-17 Ajayv

$ .getJSON是$ .ajax的快捷方式，您应该考虑阅读$ .ajax的文档：https：//api.jquery.com/jQuery.ajax/ – Marcs

您需要的Ajax调用

$("#myDiv").html("<img src='spinner.gif'>"); 
$.ajax({ 
    dataType: "json", 
    url: url, 
    data: data, 
    success: $("#myDiv").html("success"); 
});

来源

2016-09-17 07:57:36 jeff

是的，它的工作谢谢你 – Ajayv

前显示图像，或任何容器元素添加一个微调图像标签。

<div id="#train-info"><img src="loading-spinner.gif"/></div>

在将数据附加到它之前，请删除此图像标记。

来源

2016-09-17 08:00:42 Vishal

显示加载功能，直到JSON数据加载从API

回答

相关问题