我使用$ .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>");
});
});
}
$ .getJSON是$ .ajax的快捷方式,您应该考虑阅读$ .ajax的文档:https://api.jquery.com/jQuery.ajax/ – Marcs