#概要
jQueryのローディング画面のサンプルです。
#ソース
■正常に表示される
<!DOCTYPE html>
<html>
<head>
<title>done, fail, statusCodeの処理順確認</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
body {
margin-top: 100px;
text-align: center;
}
.hide {
display: none;
}
.loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
background-image: url(https://gimmicklog.com/demo/loading/img-loading.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: 150px 150px;
}
</style>
<form method="post" accept-charset="utf-8">
</form>
<button id="button1">POST</button>
<div class="msg"></div>
<div class="loading hide"></div>
<script type="text/javascript">
$(function() {
$('#button1').on('click', function(){
$.ajax({
url: 'send.php', //存在しないファイルを指定及びURLを指定すると異常終了
type: 'POST',
data: {
name: "test"
},
//リクエストが完了するまで実行される
beforeSend: function(){
$('.loading').removeClass('hide');
}
}).done(function(data){
$('.loading').addClass('hide');
//$('.msg').append('<p>NAME: ' + data + '</p>');
console.log("XMLHttpRequest : " + data);
console.log(data);
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
console.log("failed...");
//下記のコードはエラーになった場合も、ローディング画面終了のためです。
$('.loading').addClass('hide');
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
});
});
});
</script>
</body>
</html>
■send.phpソース
サーバへ格納しているファイルです。htmlファイルと同じ階層においてから実行してみてください。
※Apache+PHP環境がある前提で実行です。
sleep(1);
header('Content-type: text/plain; charset=utf-8');
if(isset($_POST['name'])) {
$name = $_POST['name'];
//$msg = nl2br($name);
//echo $msg;
//echo "SUCCESS";
} else {
echo "FAILED.";
}
#動作確認
■異常終了
下記のように画面でボタンをクリックした後、エラーがコンソールに表示されます。
■正常終了
下記のように画面でボタンをクリックした後、正常の200コード値が返却されます。
■ローディング画面
全画面が下記のように表示されます。
#参照サイト
jQueryでページ読み込み中にローディング画面を表示する方法
https://gimmicklog.com/jquery/278/
Ajax（jQuery）での通信中にローディング画像を表示する
https://qiita.com/dkmrkm/items/4aa1a457dd26806e9008
#終わりに
AJAX通信処理でapiの戻り値が返ってくるまでローディング画面を表示してみました。
正常に動作していることを確認しましたので、問題ないと思います。
上手く動いていない場合、既存のjavascriptにエラーがないか確認してみてください。