Ajaxでいいね機能が実装できない

Question

前提・実現したいこと

PHPでいいね機能をajax通信で実装させ、画面遷移させることなくいいねの切り替えを行いたい。

PHPで自作のアプリを制作しており、ajax通信でいいね機能の実装をしています。
【PHP】いいね機能実装をもとにコードを書いてみましたが、ajaxでいいねができずに困っています。

実現したい内容は、
①いいねを押す
②まだいいねを押していないユーザであれば、「いいね解除」に画面遷移することなく変更
③「いいね解除」を解除したい場合は、もう一回おす
④画面遷移することなく「いいね」に戻る

現在の状況
いいねを押しても動作しない
データベースにもユーザ情報や投稿IDなどを保存できていない

※画像にていいね解除になっているのは、データベースに直打ちでデータを入力したから。

テーブル構造
favoritesテーブル

該当のソースコード

            <form class="favorite_count" action="" method="post">
              <input type="hidden" name="post_id">
              <button type="button" name="favorite" class="favorite_btn">
              <?php if (!$obj_f->check_favolite_duplicate($_SESSION['login_company']['id'],$val['id'])): ?>
                いいね
              <?php else: ?>
                いいね解除
              <?php endif; ?>
              </button>
            </form>

favorite.js(ajax処理)

//URLから引数に入っている値を渡す処理
function get_param(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[[]]/g, "\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return false;
  return decodeURIComponent(results[2].replace(/+/g, " "));
}


$(document).on('click','.favorite_btn',function(e){
  e.stopPropagation();
  var $this = $(this),
      page_id = get_param('page_id'),
      post_id = get_param('procode');
  $.ajax({
      type: 'POST',
      url: '../../Views/Favorite/favorite.php',
      dataType: 'json',
      data: { page_id: page_id,
              post_id: post_id}
  }).done(function(data){
      location.reload();
  }).fail(function() {
    location.reload();
  });
});

favorite.php(いいね処理)

<?php
session_start();
require_once(ROOT_PATH .'/Models/Favorite.php');

$obj_f = new Favorite();

var_dump($_SESSION['login_company']['id']);

if(isset($_POST)) {
  $c_id = $_SESSION['login_company']['id'];
  $p_id = $_POST['post_id'];

  $result = $obj_f->favoriteDone($c_id,$p_id);
}

Favorite.php(いいね機能のDB処理)

<?php

require_once(ROOT_PATH .'/Models/Db.php');
ini_set('display_errors', "On");

class favorite
{
  public function check_favolite_duplicate($company_id, $post_id)
  {
    $sql = 'SELECT *
            FROM favorites
            WHERE company_id = :company_id AND post_id = :post_id';

    $stmt = connect()->prepare($sql);
    $stmt->bindValue(':company_id', $company_id, PDO::PARAM_INT);
    $stmt->bindValue(':post_id', $post_id, PDO::PARAM_INT);
    $stmt->execute();
    $favorite = $stmt->fetch(PDO::FETCH_ASSOC);
    return $favorite;
  }

  public function favoriteDone($company_id,$post_id)
  {
    $sql = 'INSERT INTO favorites(company_id, post_id)
            VALUES (:company_id, :post_id)';
    
    $stmt = connect()->prepare($sql);
    $stmt->bindValue(':company_id', $company_id, PDO::PARAM_INT);
    $stmt->bindValue(':post_id', $post_id, PDO::PARAM_INT);
    $favorite = $stmt->execute();
    return $favorite;
  }

  public function favoriteCancal($id)
  {
    $sql = 'DELETE FROM favorites WHERE id = :id';

    $stmt = $pdo->prepare($sql);
    $stmt->bindValue(':id', (int)$id, PDO::PARAM_INT);
    $result = $stmt->execute();
    return $favorite;
  }
}

試したこと

いいねをデータベースに登録する処理を以下のように試したところ、DBに登録されることは確認。

$c_id = $_SESSION['login_company']['id'];//ログインユーザID
$p_id = 113;//投稿ID
$result = $obj_f->favoriteDone($c_id,$p_id);

favorite.phpにて、

$p_id = $_POST['post_id'];
//ここをvar_dumpで調べたらnull

だから、favorite.jsの処理がよくない？

favorite.jsについては、冒頭にも記載した【PHP】いいね機能実装
こちらをコードをコピペ

いじった部分は、url部分の

      url: '../../Views/Favorite/favorite.php',

現在ファイル構成
Models▶︎Favorite.php
public▶︎js▶︎favorite.js
Views
▶︎Favorite▶︎favorite.php
▶︎Posts▶︎index.php

追記
m.ts10806さんより
ajax送信前の値は取得できているか？

  var $this = $(this),
      page_id = get_param('page_id'),
      post_id = get_param('procode');

//この部分を調べた

  console.log(page_id);
  console.log(post_id);

するとどちらの値もnullだった

他に足りない点があればご教示ください。

##mtさんより以下の内容で解決

フォーム送信

<button type="button" name="favorite" class="favorite_btn" data-post_id="<?php echo $val['id'] ?>" data-c_id="<?php echo $_SESSION['login_company']['id'] ?>">

data属性にてログインIDと投稿IDを送信

$(document).on('click','.favorite_btn',function(e){
  e.stopPropagation();
  c_id = $(e.currentTarget).data('c_id');
  post_id = $(e.currentTarget).data('post_id');

    $.ajax({
        type: 'POST',
        url: '/Favorite/favorite.php',
        dataType: 'json',
        data: { c_id: c_id,
                post_id: post_id}
    }).done(function(data){
        location.reload();
    }).fail(function() {
      location.reload();
    });
});

Comments

[m.ts10806]

そもそもURLから情報を取得してPHPに流すようにしているように見受けられますが、どのようなURLでアクセスしているのでしょう。
そして、Ajaxで送信する前に想定の値は入ってきているのでしょうか。

>//ここをvar_dumpで調べたらnull

Ajaxはバックグラウンドで実行するものなのですが、どうやってその値を出力確認したのでしょうか。var_dump()だとレスポンスに含まれるはずですが。

[退会済みユーザー]

＞＞どのようなURLでアクセスしているのでしょう。
http://localhost:8888/Posts/index.phpからajaxのアクセスをしています。

＞＞Ajaxで送信する前に想定の値は入ってきているのでしょうか。
$_SESSION['login_company']['id']→ログイン ID,　$val['id']→投稿IDについて調べると、
それぞれ21,113と想定する値は確認できました。

＞＞Ajaxはバックグラウンドで実行するものなのですが、どうやってその値を出力確認した？
こちらは、実際にfavorite.phpに遷移して確認しました。

[m.ts10806]

＞$_SESSION['login_company']['id']→ログイン ID,　$val['id']→投稿IDについて調べると、

違います。
「Ajax送信前」つまり、JavaScriptです。
e.stopPropagation();
var $this = $(this),
page_id = get_param('page_id'),
post_id = get_param('procode');

コードからすると
http://localhost:8888/Posts/index.php?page_id=123&procode=abc

のようにアクセスしてないと何も取得できないのではないでしょうか
ということを確認しています。

[退会済みユーザー]

失礼いたしました。
ご指摘のようにこちらどちらも値はnullで返って来てます。

質問にも追記でその旨を反映いたします。

Answer 1

するとどちらの値もnullだった

ではAjaxのリクエストがnullとなるのは道理ですね。
nullを送信しているわけですから。
やりたいことと実装に齟齬が見られます。

なぜURLから受け取ろうとしてるのか謎ですが、
もし「一覧で表示させている」ならそれぞれ固有の情報が入っているはずで、
そこを何かしらで渡すべきかと。

良く使われそうなのはdata属性。

例：

<button type="button" name="favorite" class="favorite_btn" data-post_id="123">

※123は実際のそれぞれの情報をPHPから出力

$(document).on('click','.favorite_btn',function(e){
    e.stopPropagation();
    post_id = $(e.currentTarget).data('post_id');

あと、Ajaxって画面表示を伴うわけではないのでvar_dump()ではなくデバッグツール入れるとかログファイルに出力するとかで確認されたほうが良いかと思います。
出力された部分を全てレスポンスとするので、JSONとかをレスポンスとしたいときに弊害になりますしね。

Comments

[退会済みユーザー]

ありがとうございます。実装したい内容ができました。
送信前のフォームには、質問追記のようにログインIDと投稿IDをdata属性にて2つ持たせました。
javascript部分にはそちらを受け取り、ajax処理したところできました。
data属性についても理解深まったので、次回から応用していきたいと思います。