質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

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

ITOMO5963
ITOMO5963

総合スコア98

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0グッド

1クリップ

686閲覧

投稿2022/11/01 06:18

編集2022/11/01 08:17

参考URL

https://blog-and-destroy.com/7283

実現したいこと

ボタンクリック後、サーバー側でバックエンド処理を実行している間、ローディング画面を表示させたいです。
上記の参考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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2022/11/01 07:06

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

2022/11/01 07:08

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

回答2

2

.submit(

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

投稿2022/11/01 07:11

m.ts10806

総合スコア80030

spoofy_dragon, ITOMO5963😍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

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/

0

ベストアンサー

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="ロード">

// sample.php

PHP

1<?PHP 2sleep(3); 3print "success";

投稿2022/11/01 12:45

編集2022/11/02 01:35
yambejp

総合スコア109059

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

ITOMO5963

2022/11/02 01:14

ありがとうございます。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。