htmlから常時更新するphpを呼び出したい

htmlを開いても何も表示されません。
なぜでしょうか？
phpを直接開くと表示されます。

html
1<html lang="ja">
2<body>
3	<script>
4		function event() {
5			$.ajax({
6				type: 'POST',
7				url :'test.php',
8				data:{ key:value }
9			}).fail(function(){
10				alert('error');
11			}).done(function(){
12				alert('success');
13			});
14		}
15		setInterval(event, 10);
16	</script>
17</body>
18</html>

php
1<!DOCTYPE html>
2<html lang="ja">
3<body>
4	test
5</body>
6</html>

やっぱりダメです。

HTML
1<html lang="ja">
2<body>
3	<script>
4		function event() {
5			$.ajax({
6				type: 'POST',
7				url :'test.php',
8				data:{ key:value }
9			}).fail(function(){
10				alert('error');
11			}).done(function(){
12				alert('success');
13			});
14		}
15		setInterval(event, 10);
16	</script>
17	<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
18</body>
19</html>

htmlを開いても

開くとはブラウザにhtmlのURLを打ち込むことです。
phpを直接開くとはphpのURLをブラウザに直接打ち込むことです。

エラーもサクセスも
何も表示されません。

URLはhttpsです。

ブラクラについて
setIntervalを使うと負荷が高くなるけどsetTimeoutを使えば10msごとでも負荷高くならないよね？

出来ました！！
出来ました！！！

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<div id="edit_area"></div>
3<script>
4var fn = function() {
5	$.ajax({
6	        type: 'post',
7	        url: "test6.php",
8	        success: function(result){
9			document.getElementById('edit_area').innerHTML = result;
10	        }
11	        });
12	setTimeout(fn,10);
13};
14fn();
15</script>

PHP
1<?php
2$result = file_get_contents ("10.txt");
3file_put_contents("10.txt", $result + 1);
4echo $result;
5exit;
6?>

m.ts10806

2022/04/05 21:59

>htmlを開いても開くとは >phpを直接開くとだから、開くとは

m.ts10806

2022/04/05 22:00

何かしらエラーが起きてもそのエラーを出すような実装になってない（例外を握りつぶしている）から何が原因か辿るのは不可能。

int32_t

2022/04/05 23:10

「error」か「success」の alert() ダイアログは表示されているのですか?

m.ts10806

2022/04/05 23:41

そのURLを書かないと誰も再現できない。

退会済みユーザー

2022/04/06 00:52

webブラウザで開いた際のurlが、file://～って感じなのか、http://～とか https://～とかなのかを示してほしいのと。$.ajaxはjQueryの読み込みをしないと動かないので、例えばCDNからhtmlに読み込ませるようなことをしないと動作しません。参考：【最新版】jQueryのCDNを読み込む方法【超簡単です！】 - PENGIN BLOG https://crestadesign.org/jquery-cdn/

m.ts10806

2022/04/06 01:16

ブラクラみたいな実装を。

m.ts10806

2022/04/06 02:02 編集

>URLはhttpsです。プロトコル部分だけ提示されても。

m.ts10806

2022/04/06 03:52

10msごとにリクエストして何がしたいのかわからないけど、そもそもそれ以前の問題なのでまずはそのメソッドが動くことを確認するところからでしょう。基礎からですね。

int32_t

2022/04/06 05:07

とにかくまずはブラウザの開発者ツールのコンソールを見ましょうね。

m.ts10806

2022/04/09 02:20

質問受付中のまま投げっぱなしてませんか。

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

回答3件

１秒間に100回もhttpリクエストをしてはいけません
setIntervalで呼び出すコールバックの中にalertを書いてはいけません
websocketあたりで対応してみてください

投稿2022/04/06 00:49

編集2022/04/06 00:50

yambejp

総合スコア114829

自己解決

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<div id="edit_area"></div>
3<script>
4var fn = function() {
5	$.ajax({
6	        type: 'post',
7	        url: "test6.php",
8	        success: function(result){
9			document.getElementById('edit_area').innerHTML = result;
10	        }
11	        });
12	setTimeout(fn,10);
13};
14fn();
15</script>

PHP
1<?php
2$result = file_get_contents ("10.txt");
3file_put_contents("10.txt", $result + 1);
4echo $result;
5exit;
6?>

投稿2022/04/09 03:29

編集2022/04/09 03:35

jmdajmw

総合スコア302

m.ts10806

2022/04/09 03:30

下？自己解決？どこがですか？

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

jQueryの機能を利用しているのにjQuery本体の読み込みがない。
コンソールにエラー出てますよ

そもそも「event()というメソッドが呼び出されているか、確認しては？
呼び出されてないから何も起きないだけ。

js
1		function event() {
2alert('call'); //こういうのを試した？
3			$.ajax({
4				type: 'POST',
5				url :'test.php',
6				data:{ key:value } //valueなんて変数どこにもない
7			}).fail(function(){  //failで受け取るべきコールバックを一切受け取っていない
8				alert('error');
9			}).done(function(){  //doneで受け取るコールバックを一切受け取っていない
10				alert('success');
11			});
12		}
13		setInterval(event, 10);  //本当にここでいいの？
14	</script>
15	<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
16　　　//ただ、たとえsetIntervalが呼び出されたとして$.ajaxのほうが先に動くのでundefined