OctoberCMSプラグイン作成：Ajaxハンドラにデータを渡す

October CMSのドキュメントでは (さらっと書いてはあるが) ハンドラでデータを受け取る方法が分かりづらかったのでメモ。OctoberのAjax APIの基本的な使い方はドキュメントを参考のこと。

OctoberはJavaScriptからOctoberのAjaxハンドラを呼び出す方法と、JavaScriptなしでHTMLタグから呼び出す方法の２通りを提供しているので、両方に関して記述する。

フロントエンドからデータの渡し方

下記の例ではAjaxハンドラonHogeが実装されていると仮定する。
AjaxハンドラはPageのPHPセクションに関数として、あるいはコンポーネントにメソッドとして実装する。

HTMLタグからAjaxを使う場合

<input>の値が自動的に送られるのに加えて、data-request-data属性の値が送信される。（この例では都合上hiddenにしているが、typeは何でも良い。）

<form>
    <input type="hidden" name="value1" value="hoge">
    <input type="hidden" name="value2" value="fuga">
    <button type="button" data-request="onHoge" data-request-data="value3: 'foo', value4: 'bar'">Ajax実行</button>
</form>

この例だと、onHogeでは下記のようなデータを受け取ることができる。

array (
  'value1' => 'hoge',
  'value2' => 'fuga',
  'value3' => 'foo',
  'value4' => 'bar',
);

JavaScriptからAjaxを使う場合

requestメソッドの第二引数のオブジェクトにdataプロパティとして渡したいデータを入れる。

$.request('onHoge', {
    data: {
        value1: 'foo',
        value2: 'bar',
    },
});

この例では、onHogeでは下記のようなデータを受け取ることができる。

array (
  'value1' => 'foo',
  'value2' => 'bar',
);

データの受け取り方

上記のどちらの呼び出し方法を使用しても、ハンドラでの取得方法は同じだ。
ヘルパー関数inputを使用してデータを取得することができる。（inputはInputファサードのgetメソッドと同じものなのでこちらを使うこともできる。）

public function onHoge()
{
    $inputs = input(); // 全てのデータを配列で取得する
    Log::debug($inputs);
    $value1 = input('value1'); // value1の値を取得する
    Log::debug("value1 is {$value1}");
}