jQuery ボタンクリック後、サーバー側でバックエンド処理を実行している間、ローディング画面を表示させたい。

参考URL

実現したいこと

ボタンクリック後、サーバー側でバックエンド処理を実行している間、ローディング画面を表示させたいです。
上記の参考URLのようにくるくるのローディング画面を表示させて完了後、元の画面をリロードして表示させてたいです。
jQureyとJava超初心者で検索しながら、やっていますが、糸口がわかりません。
お力沿いお願いいたします。

困っていること。

・クリックしても、バックエンドの処理が発生していない
・ボタンクリックしてもくるくるがでてこない時がある。

HTML/jQuery (view.php※PHPで記載）

PHP
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <meta http-equiv="x-ua-compatible" content="ie=edge">
6        <link rel="stylesheet" href="./css/view.css">
7        <link rel="icon" href="favicon.ico">
8        <title>-ローディング画面　確認</title>
9        <script src="./js/jquery-3.6.1.min.js"></script>
10    </head>
11    <body>
12      <header>ローディング画面</header>
13        <div class="button">
14          <p><button id="button">実行</button></p>
15        </div>
16        <div id="overlay">
17          <div class="cv-spinner">
18            <span class="spinner"></span>
19          </div>
20        </div>
21
22        <!-- ローディング画面 -->
23        <script>
24          jQuery(function($){
25            $(document).ajaxSend(function() {
26              $("#overlay").fadeIn(150);　
27            });
28            $('#button').click(function(){
29              $.ajax({
30                url: 'loop.php',
31                success: function(data){
32                  console.log(data);
33                }
34              }).done(function() {
35                setTimeout(function(){
36                  $("#overlay").fadeOut(300);
37                },500);
38              });
39            });
40          });
41        </script>
42    </body>
43</html>

CSS(view.css)

CSS
1#button{
2  display:block;
3  margin:20px auto;
4  padding:10px 30px;
5  background-color:#eee;
6  border:solid #ccc 1px;
7  cursor: pointer;
8}
9#overlay{ 
10  position: fixed;
11  top: 0;
12  z-index: 100;
13  width: 100%;
14  height:100%;
15  display: none;
16  background: rgba(0,0,0,0.6);
17}
18.cv-spinner {
19  height: 100%;
20  display: flex;
21  justify-content: center;
22  align-items: center;  
23}
24.spinner {
25  width: 40px;
26  height: 40px;
27  border: 4px #ddd solid;
28  border-top: 4px #2e93e6 solid;
29  border-radius: 50%;
30  animation: sp-anime 0.8s infinite linear;
31}
32@keyframes sp-anime {
33  100% { 
34    transform: rotate(360deg); 
35  }
36}
37.is-hide{
38  display:none;
39}

バックエンド処理(loop.php)

PHP
1<?php
2
3for($i = 0; $i < 15; $i++){
4    echo $i;
5    sleep(1);
6}
7$filename = '/tmp/loop.log';
8$content = "実行完了\n";
9$fp = fopen($filename,'w');
10fwrite($fp,$content);
11fclose($fp)
12?>

バージョン

Apache:2.4.6
PHP:7.2.24
Jquery:3.6.1

m.ts10806

2022/11/01 07:06

＞・クリックしても、バックエンドの処理が発生していない何をもってそのように判断されたのでしょうか。

ITOMO5963

2022/11/01 07:08

バックエンド処理(loop.php)で処理後にファイルを作成するようにしています。作成されていないため、バックエンド処理が発生していないと判断しました。

行動規範の内容に同意します

回答2件

.submit(

これだとフォーム送信してしまっています。
buttonのtypeをbuttonにしたうえで、formのsubmitではなくbuttonのclickのイベントに変えるべきと思います。

投稿2022/11/01 07:11

m.ts10806

総合スコア80854

ITOMO5963

2022/11/01 08:20

回答ありがとうございます。 buttonのclickにコードを修正してみましたが、バックエンド処理が実行されていません。検索しましたが、「alert("クリックされました");」コードのサンプルはあるのですが、 PHPの処理を実行するようなサンプルが見つけることができません。お力沿いお願いします。

m.ts10806

2022/11/01 18:55

>buttonのclickにコードを修正してみましたが、質問のコード更新されたようですが、私の回答の「buttonのtypeをbuttonにしたうえで」が対応されていません。 type属性がないbuttonタグのデフォルトはtype=submitです。（単にloading出したいだけなら、とりあえずの動作確認としてはbuttonにこだわらなくても良いとは思いますが） >検索しましたが、「alert("クリックされました");」コードのサンプルはあるのですが、 >PHPの処理を実行するようなサンプルが見つけることができません。何を求めてどう検索しているのでしょうか。この文章だけでは方向性分かりませんでした。ちなみに、loadingのほうはどうなっていますか？ loop.phpを直に実行したときに想定の処理がなされるかも確認してください。もう1点。 doneで成功時の処理しか受け取っていないので、問題が起きたときに把握できないようになってると思います。もちろんPHPでのデバッグのためにデバッグツールを入れるのは必須だと思いますが、JavaScript側のデバッグもできるようにfailもコールバック取得してください。 http://karashidaimyojin.com/jquery/ajax-ajax/

行動規範の内容に同意します

ベストアンサー

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  let controller;
4  btn.addEventListener('click',async()=>{
5    controller = new AbortController();
6    const signal = controller.signal;
7    dlg.showModal();
8    const res=await fetch('sample.php',{signal}).then(res=>res.text()).then(txt=>{
9      alert(txt);
10    }).catch(err=>{
11      alert(err);
12    });
13    dlg.close();
14  });
15  dlg.querySelector('.cancel').addEventListener('click',()=>{
16    controller.abort();
17  });
18});
19</script>
20<dialog id="dlg">
21くるくる・・・<br>
22<input type="button" class="cancel" value="キャンセル">
23</dialog>
24<input type="button" id="btn" value="ロード">