jQueryのローディング画面

#概要
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.";
  }
~~~

#動作確認
■異常終了
下記のように画面でボタンをクリックした後、エラーがコンソールに表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/af96fe15-0bcc-4a8b-f388-645df690cd68.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/14663f73-1cbc-1860-180e-754b55ad6e5a.png)

■正常終了
下記のように画面でボタンをクリックした後、正常の200コード値が返却されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/cc65fb01-7cd7-b70e-be7f-84cb482dd4a8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/fdb38d8c-b60e-fafa-accc-584973448f87.png)

■ローディング画面
全画面が下記のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/c34b88ba-fa81-7ba1-f5e2-dfe1ea24a1d1.png)

#参照サイト
jQueryでページ読み込み中にローディング画面を表示する方法
https://gimmicklog.com/jquery/278/

Ajax（jQuery）での通信中にローディング画像を表示する
https://qiita.com/dkmrkm/items/4aa1a457dd26806e9008

#終わりに
AJAX通信処理でapiの戻り値が返ってくるまでローディング画面を表示してみました。
正常に動作していることを確認しましたので、問題ないと思います。
上手く動いていない場合、既存のjavascriptにエラーがないか確認してみてください。