PHPファイルで処理した後の戻り値がjqueryで正常に受け取れない

jqueryのajax()メソッドでPHPファイルに通信を行い、
「いいねボタンを押すとDBへレコードを挿入、さらに処理した後にいいねの数を表示する」
「既にいいねをした状態でボタンを押すと、いいね状態を解除（DBのいいねレコードを削除、解除後のいいね数を表示）する」

という機能を作成中です。

参考記事：https://qiita.com/kgkgon/items/4ea0675afde639e6d540

上記記事を元に実装しているのですが、いいねの数の表示が想定通りにいきません。

発生している問題・エラーメッセージ

「いいね０　の状態でボタンを押す」　→　「いいね０１　に変化」
「いいね１　の状態でボタンを押す」　→　「いいね１０　に変化」
「いいね２　の状態でボタンを押す」　→　「いいね１１　に変化」

いいねボタンのあるビューファイル　mypage.php
いいねボタンが押された時のjquery　footer.php
Ajax通信を受け取り、処理するファイル　ajaxNice.php

おそらく、この３つのファイルのどれかに問題があると思うので、下記コードと試した事を拝読して意見をいただけますと幸いです。

mypage.php　いいねボタンの箇所のみ抜粋

<i class="fas fa fa-dumbbell js-click-nice <?php if(isNice($_SESSION['user_id'], $val['id'])){ echo 'active'; } ?>"
                      aria-hidden= "true" data-recordid = "<?php echo sanitize($val['id']); ?>" > </i>
            <span><?php echo $dbNiceNum; ?></span>

footer.php
1   var $nice = $('.js-click-nice') || null,
2        niceRecordId;
3        login_flg = <?php (!empty($_SESSION['user_id'])) ? true : false; ?>
4
5          $nice.on('click' ,function(e){
6            if(login_flg){
7
8            e.stopPropagation();
9            var $this = $(this);
10            niceRecordId = $this.data('recordid') || null;
11            niceCounter  = $this.next('span') || null;
12
13            console.log(niceRecordId);
14
15            if(niceRecordId !== undefined && niceRecordId !== null){
16
17                $.ajax({
18                  type: 'POST',
19                  url: 'ajaxNice.php',
20                  data: { recordId : niceRecordId}
21                  
22                }).done(function(data){
23                  //いいね総数を表示
24                  niceCounter.text(data);
25                  //$thisのclassをtoggleclassで付け外しおする
26                  $this.toggleClass('active');
27                  //成功したことをコンソール表示。本番では削除
28                  console.log('Ajax Success');
29                  console.log( data );
30            //失敗した時の処理
31                }).fail(function(){
32                  console.log('Ajax Error');
33                });
34              }
35
36             }
37          });

ajaxNice.php

<?php
  require('function.php');

  debug('Ajax.phpの処理を開始');
  debugLogStart();

// Ajax処理

//postがあり、ユーザーIDがあり、ログインしている場合
if(isset($_POST['recordId'])){
  debug('POST送信があります。');

  $todo_id = $_POST['recordId'];
  debug('レコードID：'.$todo_id);

  try {
    $dbh = dbConnect();
    $sql = 'SELECT * FROM nice WHERE todo_id = :todo_id AND user_id = :u_id';
    $data = array(':u_id' => $_SESSION['user_id'], ':todo_id' => $todo_id );

    $stmt = queryPost($dbh, $sql, $data);
    $result = $stmt->rowCount();
    debug('登録数'.print_r($result));

    //レコードが１件でもある場合
    if(!empty($result)){
      debug('niceONの状態でボタンが押されたので、niceをOFFにします');
      //レコードを削除する
      $sql = 'DELETE FROM nice WHERE todo_id = :todo_id AND user_id = :u_id';
      $data = array(':u_id' => $_SESSION['user_id'] ,':todo_id' => $todo_id);
      $stmt = queryPost($dbh, $sql, $data);

      echo getNiceNum($todo_id);
      } else {
      debug('niceOFF状態でボタンが押されたので、niceONにします');
      //レコードを挿入する
      $sql = 'INSERT INTO nice (user_id, todo_id, create_date) VALUES (:u_id, :todo_id, :create_date)';
      $data = array(':u_id' => $_SESSION['user_id'], ':todo_id' => $todo_id, ':create_date' => date('Y-m-d H:i:s'));

      $stmt = queryPost($dbh, $sql, $data);
       echo getNiceNum($todo_id);
    }

    } catch (Exception $e) {
      error_log('エラー発生：'.$e->getMessage());
    }
  }
debug('Ajax処理終了');
   ?>

試したこと

html()以外にも,
text()の書き換えを試したが動作は変わらず。

ajaxnice.phpでSQLを送った後のnice数をログに流したところ、DB上で「０」の時は０、「１」の時は１と（一ケタで）出力されていた。また、dar_dumpしたところint型だった。

jquery側のdoneメソッドで受け取ったdataをconsole.logしたところ、
DB上で「０」の時は１０、「１」の時は１０と出力されてしまっていた。

PHPファイルで正常に出力された値がjqueryに戻り値としてきた時に変化しまっている？
→
ajax()内でdataType: "text";
をしたらイベントが発火しなくなってしまった。

以上、よろしくお願いします。

Y.H.

2019/09/04 01:04

phpのResponce BodyはgetNiceNum()で作成されているようなので getNiceNum()で何やってるかわからないです。質問にgetNiceNum()について追記ください。

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

回答2件

ベストアンサー

「いいね０　の状態でボタンを押す」　→　「いいね０１　に変化」

「いいね１　の状態でボタンを押す」　→　「いいね１０　に変化」
「いいね２　の状態でボタンを押す」　→　「いいね１１　に変化」

全体は見ていません。上記の情報のみで判断しています。
数字部分で足し算をするのが適切なのだと思いますが、返り値を文字連結していると思われます。また、返り値に関しても意図したものではないのでは？

インプット/アウトプットを整理して切り分けてください。

投稿2019/09/03 20:38

退会済みユーザー

総合スコア0

marutto

2019/09/04 00:47

アドバイスありがとうございます。仰るとおり、返り値となる「更新後のいいね数」が１つなら「１」、と表示して欲しいのに「０１」と表示されてしまいます。意図した処理ではありません。 dataをconsole.logした時点で「０１、１０」になっていることから、jquery側で値を受け取った時に文字連結してしまっていると思うのですが、文字連結するようなコードを書いた覚えはありません。また、dataTypeを指定することでこの点を解決できるかと思い試してみましたが、解決できず参っています。 PHPファイルで処理した値をjquery側に厳密な値として渡すにはどうすればよろしいでしょうか？

marutto

2019/09/04 01:14

戻ってきた値になぜ「０」や「１」付くのか考えてみたところ、ajaxNice.phpのいいね数の判定についてデバッグするために debug('登録数'.print_r($result)); というコードを打っていました。(debugはphp.logに出力する関数）これがファイル終盤の getNiceNumのいいね数と連結して戻り値になっていたために問題が生じていました。「文字連結されているのでは？」というお言葉のおかげで解決できました！ありがとうございました！

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