Ajaxを使いPHPのDateTimeを変更したい

Question

前提・実現したいこと

ドットインストールの「PHPのDateTimeクラスでカレンダーを作ろう」で作ったカレンダーを、
ページ遷移しないで月の切り替えをできるようにしたいです。

発生している問題

Ajax で現在表示されている年月をHTML要素として渡し、<table> タグを書き換えようと思っているのですが、うまくいきません。
PHP にパラメータが渡っていないようで、例外処理である今月のデータが返ってきます。

該当のソースコード

$(function() {

  $('#today').click(function () {
    $.post('change_month.php', {
      now: $('#now').html(),
      // jsday: ''
    }, function (data) {
      $('#table').html('<table><thead><tr><th><p id="prev">&laquo;</p></th><th colspan="5">' + data.yM + '</th><th><p id="next">&raquo;</p></th></tr></thead><tbody><tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>' + data.shoW + '</tbody><tfoot><tr><th colspan="7"><p id="today">Today</p></th></tr></tfoot></table>');
    });
  });

  $('#prev').click(function () {
    $.get('change_month.php', {
      now: $('#now').html(),
      jsday: '-1 month'
    }, function (data) {
      $('#table').html('<table><thead><tr><th><p id="prev">&laquo;</p></th><th colspan="5">' + data.yM + '</th><th><p id="next">&raquo;</p></th></tr></thead><tbody><tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>' + data.shoW + '</tbody><tfoot><tr><th colspan="7"><p id="today">Today</p></th></tr></tfoot></table>');
    });
  });

  $('#next').click(function () {
    $.get('change_month.php', {
      now: $('#now').html(),
      jsday: '+1 month'
    }, function (data) {
      $('#table').html('<table><thead><tr><th><p id="prev">&laquo;</p></th><th colspan="5">' + data.yM + '</th><th><p id="next">&raquo;</p></th></tr></thead><tbody><tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>' + data.shoW + '</tbody><tfoot><tr><th colspan="7"><p id="today">Today</p></th></tr></tfoot></table>');
    });
  });

});

<?php

class Calender
{
  public $yearMonth;
  public $_thisMonth;

  function __construct()
  {
    try {
      if (!isset($_POST['now']) || !isset($_POST['jsday'])) {
        throw new Exception();
      }
      $this->_thisMonth = new DateTime($_POST['now'] . $_POST['jsday']);
    } catch (Exception $e) {
      $this->_thisMonth = new DateTime('first day of this month');
    }
    $this->yearMonth = $this->_thisMonth->format('F Y');
  }
 
  public function show()
  {
    $tail = $this->_getTail();
    $body = $this->_getBody();
    $head = $this->_getHead();
    $html = '<tr>' . $tail . $body . $head . '</tr>';
    return $html;
  }

  //  先月
  private function _getTail()
  {
    $tail = '';
    $lastDayOfPrevMonth = new DateTime('last day of' . $this->yearMonth . '-1 month');
    while ($lastDayOfPrevMonth->format('w') < 6) {
      $tail = sprintf('<td class="gray">%d</td>' ,$lastDayOfPrevMonth->format('d')) . $tail;
      $lastDayOfPrevMonth->sub(new DateInterval('P1D'));
    }
    return $tail;
  }
  //  今月
  private function _getBody()
  {
    $body = '';
    // DatePeriod() 特定の期間の日付オブジェクトを作るクラス
    $period = new DatePeriod(
      new DateTime('first day of' . $this->yearMonth), // 最初の日
      new DateInterval('P1D'), // 間隔
      new DateTime('first day of' . $this->yearMonth . '+1 month') // 期間の終わり
    );
    $today = new DateTime('Today');
    // 行替えの処理
    foreach ($period as $day) {
      if ($day->format('w') === '0') {
        $body .= '</tr><tr>';
      }
      $todayClass = ($day->format('Y-m-d') === $today->format('Y-m-d')) ? 'today' : '';
      $body .= sprintf('<td class="youbi_%d %s">%d</td>', $day->format('w'), $todayClass, $day->format('d'));
    }
    return $body;
  }
  // 翌月
  private function _getHead()
  {
    $head = '';
    $firstDayOfNextMonth = new DateTime('first day of' . $this->yearMonth . '+1 month');

    while ($firstDayOfNextMonth->format('w') > 0) {
      $head .= sprintf('<td class="gray">%d</td>' ,$firstDayOfNextMonth->format('d'));
      $firstDayOfNextMonth->add(new DateInterval('P1D'));
    }
    return $head;
  }
}

function h($s) {
  return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}

$cal = new Calender();

$table = array(
  "yM" => h($cal->yearMonth),
  "shoW" => $cal->show(),
 );

header('Content-Type: application/json; charset=utf-8');
echo json_encode($table);

試したこと

$_POST['now'] $_POST['jsday'] を一度別の変数名を付けて DateTime() に入れてみたりしたのですが、変数名をつけた行でエラーが出てしまいました。

補足情報

ドットインストール「PHPのDateTimeクラスでカレンダーを作ろう」
リンク内容

index.php はこのように変更しました。

<?php

require 'Calender.php';

function h($s) {
  return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}

$cal = new \MyCal\Calender();

?>

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Calender</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="" id="table">
      <table>
        <thead>
          <tr>
            <th><p id="prev">&laquo;</p></th>
            <th colspan="5" id="now"><?= h($cal->yearMonth); ?></th>
            <th><p id="next">&raquo;</p></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sun</td>
            <td>Mon</td>
            <td>Tue</td>
            <td>Wed</td>
            <td>Thu</td>
            <td>Fri</td>
            <td>Sat</td>
          </tr>
          <?php $cal->show(); ?>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="7"><p id="today">Today</p></th>
          </tr>
        </tfoot>
      </table>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script src="cal.js"></script>
  </body>
</html>

Comments

[takasima20]

.get てことは $_GET とか?

[cat_star]

完全に見落としておりました。いろいろと試しているうちにごちゃごちゃになってしまっていたようです。

Answer 1

JavaScript側ではpostで投げたりgetで投げたりしてますが、PHP側では$_POSTでしか受け取っていないので、そこでは？
おなじPHPに対して投げるならどちらかに統一した方が良いかと思います。

Comments

[cat_star]

JavaScript側を$_POST統一したら解決しました。
いろいろ試すうちに修正を忘れていました。
ありがとうございます。

[m.ts10806]

optionを自身で設定する、ラッパーメソッドである$.ajax()を使われたほうが良いかもしれません。
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

[cat_star]

書き換えました。
これからはちゃんと指定しておくことにします。