Ajax 一秒間隔で実行して自動で画面を更新する方法

提示コードですがphpの<!-のコメント部ですがAjaxでupdate.phpを実行して掲示板の投稿に新しい投稿があればそれを追加で表示すという処理を作りたいのですが以下のことがわかりません。

１，一秒間隔で自動に実行して画面を更新する方法
２，値を渡す方法と取得する方法が知りたいです。

参考サイト：https://kinocolog.com/jquery_ajax/

update.php

php
1<?php
2
3
4$dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8';
5$dbh = new PDO($dsn,"root","Shigurechan7240");        
6$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
7$dbh->setAttribute(PDO::ATTR_AUTOCOMMIT, 0);
8$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
9
10$sql = 'SELECT * FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC LIMIT :limit OFFSET :offset '; 
11$stmt = $dbh->prepare($sql);
12$stmt->bindValue(':id', $url,PDO::PARAM_STR);
13$stmt->bindValue(':limit', $viewNum, PDO::PARAM_INT);
14$stmt->bindValue(':offset', $pageNumber * $viewNum, PDO::PARAM_INT);
15$_SESSION["pageNumber"] = $pageNumber;
16$stmt->execute();
17$post = $stmt->fetchAll();
18
19
20
21
22?>

php

php
1<html lang=ja>
2<head>
3<meta charset="utf-8">
4
5<link rel="stylesheet" href="style.css">
6<title>send</title>
7</head>
8  <body>
9<?php
10session_cache_limiter('none');
11ini_set("display_errors",1);
12error_reporting(E_ALL);
13session_cache_limiter('none');
14session_start();       
15
16Require_once "renderer.php";
17Require_once "dataBase.php";
18$viewNum  = 10;
19
20$url = isset($_GET["title"]) ? $_GET["title"] : NULL; //
21if(isset($_GET["page"]) == false)
22{
23    
24    $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8';    
25    $dbh = new PDO($dsn,"root","Shigurechan7240");
26    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
27    $sql = 'SELECT * FROM Post WHERE thread_UUID=:id'; 
28    $stmt = $dbh->prepare($sql);
29    $stmt->bindValue(':id', $url, PDO::PARAM_STR);
30    $stmt->execute();
31    
32    $totalPageNum = ceil($stmt->rowCount() / $viewNum);
33    $pageNumber = $totalPageNum -1;
34
35    if($pageNumber < 0)
36    {
37        $pageNumber = 0;
38    }
39}
40else
41{
42       
43    $pageNumber = $_GET["page"];
44}
45   ?>
46
47
48<?php 
49try
50{
51    
52    $dsn = 'mysql:dbname=Bulletin_Board;host=localhost;charset=utf8';    
53    $dbh = new PDO($dsn,"root","Shigurechan7240");
54    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 
55    
56    //post
57    $post = null;
58    $stmt = null;
59    if($pageNumber == NULL)
60    {        
61        $sql = 'SELECT * FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC'; 
62        $stmt = $dbh->prepare($sql);
63        $stmt->bindValue(':id', $url, PDO::PARAM_STR);       
64        $stmt->execute();
65        $post = $stmt->fetchAll();
66        
67        
68        $t = $stmt->rowCount() % $viewNum;
69        $r = 0;
70        if($t > 0)
71        {
72            $r = $stmt->rowCount() - $t;
73        }
74        else if($t == 0)
75        {
76            $r = $stmt->rowCount() - $viewNum;
77            if($r < 0)
78            {
79                $r = 0;
80            }
81                
82        }
83        else if($t < 0)
84        {
85            
86            $r = 0;
87        }
88
89        
90        $sql = 'SELECT * FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC LIMIT :limit OFFSET :offset '; 
91        $stmt = $dbh->prepare($sql);
92        $stmt->bindValue(':id', $url,PDO::PARAM_STR);
93        $stmt->bindValue(':limit', $viewNum, PDO::PARAM_INT);
94        $stmt->bindValue(':offset', $r, PDO::PARAM_INT);        
95        $stmt->execute();
96        $post = $stmt->fetchAll();
97        
98        $_SESSION["pageNumber"] = $r;
99        
100        $postNum = $stmt->rowCount(); //全部のページ数
101        $pageNum = $viewNum;               //１ページの表示件数
102        $totalPageNum = ceil($postNum / $pageNum);        
103    }
104    else
105    {
106        $sql = 'SELECT * FROM Post WHERE thread_UUID=:id ORDER BY create_time_stamp ASC LIMIT :limit OFFSET :offset '; 
107        $stmt = $dbh->prepare($sql);
108        $stmt->bindValue(':id', $url,PDO::PARAM_STR);
109        $stmt->bindValue(':limit', $viewNum, PDO::PARAM_INT);
110        $stmt->bindValue(':offset', $pageNumber * $viewNum, PDO::PARAM_INT);
111        $_SESSION["pageNumber"] = $pageNumber;
112        $stmt->execute();
113        $post = $stmt->fetchAll();
114    }
115}
116catch(PDOException $e)
117{
118    die($e->getMessage());
119}
120?>
121
122<!------------------------------------------------->
123
124<script>
125$(function(){
126    //.sampleをクリックしてajax通信を行う
127    $('.sample_btn').click(function(){
128        $.ajax({
129            url: 'updatePage.php',
130            type: 'GET',
131            /* json形式で受け取るためdataTypeを変更 */
132            dataType: 'text',
133            
134        }).done(function(data)
135        {
136            
137            
138
139        }).fail(function(data){
140            /* 通信失敗時 */
141            alert('通信失敗!');
142                    
143        });
144    });
145});
146</script>
147<!------------------------------------------------->
148
149<!-------------------------------- スレッドを列挙 -------------------------------->
150<?php
151    
152   
153
154
155
156if($post != false)
157{   
158    Renderer_TopBar($post[0]);
159}
160for($i = 0; $i <  $stmt->rowCount(); $i++)        
161{
162    
163    $sql = 'SELECT * FROM Account WHERE UUID =:id';  
164    $stmt2 = $dbh->prepare($sql);
165    $stmt2->bindValue(':id',$post[$i]["create_UUID"] , PDO::PARAM_STR);
166    $stmt2->execute();
167    $account = $stmt2->fetch();   
168
169            
170    if($post[$i]['enable'] == false)
171    {
172        //削除された投稿
173        Renderer_PostThread_Delete($post[$i]);
174    }
175    else if(isset($_SESSION["login"])  == true)
176    {
177        if(strcmp($_SESSION['UUID'],$account['UUID']) == 0)
178        {
179            //自分の投稿
180            Renderer_PostThread($post[$i]);
181        }                         
182        if(strcmp($_SESSION['UUID'],$account['UUID']) != 0)
183        {
184            //他人の投稿
185            Renderer_PostThread_Other($post[$i],$_SESSION['UUID']);
186        }
187    }
188    else
189    {
190        // ログインしていない時
191        Renderer_PostThread_Logout($post[$i]);            
192    }
193
194}
195?>    
196<br>
197<br>
198
199<?php
200
201
202
203$sql = 'SELECT * FROM Post WHERE thread_UUID=:id'; 
204$stmt = $dbh->prepare($sql);
205$stmt->bindValue(':id', $url, PDO::PARAM_STR);
206$stmt->execute();
207
208$postNum = $stmt->rowCount(); //全部のページ数
209$totalPageNum = ceil($postNum / $viewNum);
210$allPage = $totalPageNum;
211
212//print($totalPageNum);
213
214if((isset($_SESSION['login']) == true) && (($pageNumber == ($totalPageNum - 1)) || (($pageNumber == NULL))))
215{
216?>
217    <h3>投稿</h3>
218
219    <form action="submit.php" method="post">
220    <input type="hidden" name="title" value=<?php echo $url; ?> >
221    <input type="hidden" name="nowPage" value=<?php echo $pageNumber; ?> >
222                            
223    <p>文章</p>      
224    <textarea name="comment"></textarea > 
225    <br>
226    <p><button type="submit">送  信</p>
227        
228    </form> 
229
230<?php
231}
232else if( (isset($_SESSION['login']) == false) && ($pageNumber == $totalPageNum - 1 ) )
233{   
234?>
235    <h3>投稿するにはログインしてください。</h3>
236    
237<?php
238}    
239?>
240
241<?php
242
243for($i = 0; $i < $totalPageNum; $i++)
244{
245?>
246    
247    <a href="thread.php?title=<?=$url?>&page=<?=$i?>" > <?php echo $i ?></a>&nbsp &nbsp;
248<?php
249
250}
251?>
252    </body>  
253</html>
254

m.ts10806

2022/02/20 21:21

この段階で何も分からないのなら結局元々の処理やWebのリクエストやレスポンスを全く理解してないと言うことになるので、どんなアドバイスも無駄になります。作業依頼なら業者にしてください。基礎の理解に努めてください。

int32_t

2022/02/21 00:12

1はJavaScriptの入門書ならだいたい書いてあるんじゃないでしょうか。本を読んでみてください。 2は https://teratail.com/questions/lphb5zv8pwjcee の回答に書いてありますが、読んでないんでしょうか。

AbeTakashi

2022/02/21 10:30

いきなり掲示板のスレッドを非同期で表示するとかややこしいことをやらずに、まずはJavaScriptの非同期処理だけについて理解を深めるとか単純なことから始めた方が良いですよ。これまでの質問を見てると、階段を登るのにいきなり5段飛ばしくらいでやろうとしてますし、分からないところをほぼ丸投げな感じです。1段ずつ登っていくのがいいと思います。焦らずに。

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

回答1件

ベストアンサー

//sample.html

javascript
1<script>
2let timerId=setInterval(()=>{
3  fetch("api.php?t="+new Date().getTime()).then(res=>res.text()).then(console.log);
4},1000);
5</script>