同一ページの二重送信・リロード

Question

実現したいこと

php・sqlで簡易的ないいねボタン付きの掲示板の作成についてです。
（セキュリティ関係は今回省略します）

簡易的ないいねボタン・掲示板の仕様・テーブル情報は以下となります。
●いいねボタンの仕様
・各投稿内容ごとにいいねボタンを押された回数を表示
・DBにいいね用のカラムを作成し回数を保存
・いいね用formを作成し、押されたときに同一ページ内へリクエスト
・いいねボタンのからのリクエストがあった場合、同一ページ内でカウントアップの処理を実行
・ユーザーを識別して、回数制限を設ける機能は今回なし

●掲示板の仕様
・入力項目は「名前」と「投稿内容」のみ
・掲示板用formでのPOST送信時、作成されたレコードに日付を自動で登録
・名前が無記入の場合「名無し」と表示

●テーブル情報
id : 番号
name : 投稿者名
message : 投稿内容
created_at : 日付

発生している問題・分からないこと

いいねボタン付きの掲示板は既に実装してありますが、下記2つの問題点が発生しています。

・同一ページ内へPOST送信をする場合の二重送信対策
・いいねボタンが押されると毎回ページがリロードされる

●二重送信について
POST送信は別ページへリクエストしていたので、入力ページでトークンを生成してSESSION・$_POSTに格納し、送信先ページで値が同じかif文で確認してから処理を実行していました。
(処理を実行後、SESSIONを削除し二重送信は発生しないようにしていました。）
しかし、同一ページ内でPOST送信をする場合、二重送信はどのように対策すればよいのでしょうか。

また、いいねボタンが押されるとPOST送信され、毎回ページが更新されてしまうのですが、twitterのいいねボタンのように、ページが更新されずいいね数だけが増えるようにするにはどうすればよいのでしょうか。

該当のソースコード

try {
    $pdo = 'DB接続の記述';
　　
    //いいねカウントアップ用のSQL
    if($_POST) {
        $sql = "
            UPDATE net
            SET good = good + 1
            WHERE id = :id"
        ;

        $stmt = $pdo->prepare($sql);
        $stmt->bindValue(':id' , $_POST['id'] , PDO::PARAM_INT);
        $stmt->execute();
    }

    //投稿一覧表示用のSQL
    $sql = "SELECT * FROM net";
    $stmt = $pdo->prepare($sql);
    $stmt->execute();

}catch (PDOException $e) {
      $msg = '接続失敗';
}

//投稿内容一覧表示
foreach($stmt as $row) {
    echo '<p>ID:' . $row['id'] . '-' . $row['name'] . '-' . $row['created_at'] . '</p>';
    echo '<p>' . $row['message'] . '</p>';

    //いいね用form
    echo '<form method="post" action="">';
    echo '<input type="hidden" name="id" value="' . $row['id'] . '">' . $row['good'];
    echo '<input type="submit" name="good" value="いいね">';
    echo '</form>';
}

//投稿用form
<form action="insert.php" method="post">
    お名前<input type="text" name="name"><br>
    投稿内容<textarea name="message"></textarea>

    <input type="submit" name="insert" value="投稿">
</form>

//登録処理のみの記述（表示の記述は省略）

$pdo = 'DB接続の記述';

if(empty($_POST['name'])) {
    $_POST['name'] = '名無し';
}

$sql = "INSERT INTO net(name , message)  
            VALUES(:name , :message)";

$stmt = $pdo->prepare($sql);

$stmt->bindValue(':name' , $_POST['name'] , PDO::PARAM_STR);
$stmt->bindValue(':message' , $_POST['message'] , PDO::PARAM_STR);
        
$stmt->execute();

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

同一ページ内POST送信時の二重送信対策については、調べてみても別ページにPOST送信する場合の対策しか見つからず分かりませんでした。

いいねが押されたときに毎回ページが更新されてしまう問題点については、jsでイベントキャンセルをしてみましたが、POST送信自体？がキャンセルされてしまいうまく対応できませんでした。

補足

特になし

Answer 1

自ページであってもセッションを使って遷移し完了状態にします

<?PHP
session_start();

if($_POST){
  $_SESSION["hoge"]=$_POST["hoge"]??null;
  header("Location:{$_SERVER["SCRIPT_NAME"]}");
  exit;
}else{
  print_r($_SESSION);
  session_destroy();
}
?>
<form method="post">
<input name="hoge" value="123">
<input type="submit" >
</form>

参考

便宜的にgoodをセッションに保持しておきます。実際にはDBで管理してください

<?PHP
session_start();
if(filter_input(INPUT_POST,"reset")){
  session_destroy();
}
if(filter_input(INPUT_GET,"load")){
  print json_encode($_SESSION["ids"]??[]);
  exit;
}
if($id=filter_input(INPUT_GET,"good")){
  $ids=$_SESSION["ids"]??[];
  $ids[$id]=($ids[$id]??0)+1;
  $_SESSION["ids"]=$ids;
  print json_encode(["id"=>$id,"count"=>$ids[$id]]);
  exit;
}

if($_POST){
  $_SESSION["hoge"]=$_POST["hoge"]??null;
  header("Location:{$_SERVER["SCRIPT_NAME"]}");
  exit;
}else{
  print_r($_SESSION);
  unset($_SESSION["hoge"]);
}
?>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  fetch(`?load=1`).then(res=>res.json()).then(res=>{
    Object.entries(res).forEach(data=>Object.assign(document.querySelector(`[data-good="${data[0]}"] span`)??{},{textContent:data[1]}));
  });
});
document.addEventListener('click',({target})=>{
  if(target.matches('[type=button]') && target.closest('[data-good]')){
    const usp= new URLSearchParams();
    usp.append("good",target.closest('[data-good]').dataset.good);
    fetch(`?${usp}`).then(res=>res.json()).then(data=>{
      document.querySelector(`[data-good="${data.id}"] span`).textContent=data.count;
    });
  }
});
</script>
<form method="post">
<input name="hoge" value="123">
<input type="submit" >
<input type="submit" name="reset" value="reset" >
</form>

<div data-good="1">
<span></span>
<input type="button" value="いいね">
</div>
<div data-good="2">
<span></span>
<input type="button" value="いいね">
</div>
<div data-good="3">
<span></span>
<input type="button" value="いいね">
</div>

Comments

[krnkn6]

ご回答ありがとうございます。

おかげさまで二重送信については解決いたしました！

2つ目の問題点である、いいねを押したときにカウントアップだけが行われてページの更新が行われないようにするにはどうしたらよいでしょうか。

いいねを押すと毎回更新が入って、トップ画像に戻されてしまうのですが。。。

[yambejp]

いいねはサブミットせずに非同期で処理してください
ただgoodをインクリメントする仕組みだとそれこそ多重にいいねが押せてしまうので
文書idとユーザーidの組み合わせで１投稿しかできないDBの構造にした方が良いと思います