Pulldownメニュー選択時のAjax処理

pulldownによる選択後、選択肢に合わせて画面の一部を書き換える処理を考えております。
表現が難しいですが、画面の一部に当月分のカレンダーが表示されていて、仮に「10月」をpulldownで選択すれば画面のカレンダーが10月に変更される、という仕様です。

html
1<div class="dropdown">
2  <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Filter by
3  <span class="caret"></span></button>
4  <ul class="dropdown-menu">
5    <li><a href="#">1月</a></li>
6    ....
7    <li><a href="#">10月</a></li>
8  </ul>
9</div>

現在Laravel5.2を使って開発を行っております。
要は「10月」という値をPulldownからajaxで送信する「laravel5.2における最適な」方法がよく分からず困っております。またAjaxにはJqueryを使用しております。

何卒よろしくお願いいたします。

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

回答2件

ベストアンサー

例えば「年」と「月」を使って以下のようなURLでアクセスすると、
カレンダー部分のHTMLが帰ってくるというコントローラを考えるとします。
http://example.com/laravel/calendar/{year}/{month}

例えば、2016年の10月を取得するときは
http://example.com/laravel/calendar/2016/10
パラメータを送信するというより、REST API的な考えを元にURIで表現した形ですね。
リソースの取得なので、メソッド的にはGETになります。

月の選択画面で選ばれた月（と年）を元に上のようなURIを作成して、そのURIにajaxでGETアクセス。
そのレスポンスとしてHTMLが返ってくるので、そのHTMLを所定の場所（div要素の中とか）に挿入する、
という感じではどうでしょうか。

投稿2016/09/15 17:32

Archsted

総合スコア452

AlwaysOreHungry

2016/09/19 06:03

Rest APIについて勉強したいと思います。教えていただいた手法で挑戦したいと思います！！

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

こんばんは〜

「laravel5.2における最適な」な方法がよく分からず・・

というのは既に何らかの実装方法の理解または実践をされているということであれば、以下のリンクはあまり参考にならないかもしれません汗

how to add onchange event to ul tag elements?

aタグのクリックをイベントとして拾ってあげて、10月という値をdata属性とかDOM操作とか取得して、ajaxで投げてレスポンスを返す・・・ざっくりとこんな感じでしょうか

カレンダーにajaxを用いるということは何らかのデータの操作（フォーム送信）があるのだと思いますが、その辺りはcsrfTokenに気をつければ問題ないかと思います。

投稿2016/09/15 16:31

twin_bird

総合スコア230

AlwaysOreHungry

2016/09/19 06:15

ご回答ありがとうございました。大変参考になりました！！トークンについても調べてみたのですが、全リクエストヘッダーにトークンを追加する方法があったのでご参考になれば幸いです。（私が知らなかっただけかもですが、回答を機に勉強して発見したので共有できればと思い、、、出すぎた真似をお許しください！！！）（https://readouble.com/laravel/5.1/ja/routing.html）