前提・実現したいこと
PHPでいいね機能をajax通信で実装させ、画面遷移させることなくいいねの切り替えを行いたい。
PHPで自作のアプリを制作しており、ajax通信でいいね機能の実装をしています。
【PHP】いいね機能実装をもとにコードを書いてみましたが、ajaxでいいねができずに困っています。
実現したい内容は、
①いいねを押す
②まだいいねを押していないユーザであれば、「いいね解除」に画面遷移することなく変更
③「いいね解除」を解除したい場合は、もう一回おす
④画面遷移することなく「いいね」に戻る
現在の状況
いいねを押しても動作しない
データベースにもユーザ情報や投稿IDなどを保存できていない
※画像にていいね解除になっているのは、データベースに直打ちでデータを入力したから。
該当のソースコード
php
1 <form class="favorite_count" action="" method="post"> 2 <input type="hidden" name="post_id"> 3 <button type="button" name="favorite" class="favorite_btn"> 4 <?php if (!$obj_f->check_favolite_duplicate($_SESSION['login_company']['id'],$val['id'])): ?> 5 いいね 6 <?php else: ?> 7 いいね解除 8 <?php endif; ?> 9 </button> 10 </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さんより以下の内容で解決
フォーム送信
php
1<button type="button" name="favorite" class="favorite_btn" data-post_id="<?php echo $val['id'] ?>" data-c_id="<?php echo $_SESSION['login_company']['id'] ?>"> 2
data属性にてログインIDと投稿IDを送信
javascript
1$(document).on('click','.favorite_btn',function(e){ 2 e.stopPropagation(); 3 c_id = $(e.currentTarget).data('c_id'); 4 post_id = $(e.currentTarget).data('post_id'); 5 6 $.ajax({ 7 type: 'POST', 8 url: '/Favorite/favorite.php', 9 dataType: 'json', 10 data: { c_id: c_id, 11 post_id: post_id} 12 }).done(function(data){ 13 location.reload(); 14 }).fail(function() { 15 location.reload(); 16 }); 17});
回答1件
あなたの回答
tips
プレビュー