$ .getJSONを使用してAPIからデータを取得しています。私はそれを受け取った後、私はdivに情報を追加しています。しかし時にはデータの読み込みに時間がかかることがあり、divに何かが追加されるまで、読み込み機能を表示する必要があります。私はこれをどのようにして行うのですか?APIからJSONデータがロードされるまでロード機能を表示します
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>");
});
});
}
$ .ajaxは$ .ajaxのショートカットです。$ .ajaxのドキュメントを読むことを検討する必要があります。https://api.jquery.com/jQuery.ajax/ – Marcs