Laravelでajaxに挑戦してみた

3508 ワード
blade Ajax Laravel Laravel テキストリンク

Ajaxのコード

他のサイトのをそのまま転用した。
あまりに長いので食わず嫌いアレルギーを起こして中々取り組む気が起きませんでした。
JavaEEのfaceletテンプレートエンジンだと、簡単に実装できるタグみたいなのがあったので、最新のPHPフレームワーク(2019年現在)であるLaravelなら当然そういう簡単なのがあるはずだと思いしばらくググっていましたが、どれをみてもこういう感じでした。
JQueryですが、長いので丸ごとコピーしてコメントの行だけ差し替えて使いましょう。

<script>
        $(function(){
            $('#button').click( //起動するボタンなどのid名を指定
                function(){
                    $.ajax({
                        type:'GET', //GETかPOSTか
                        url:'ajaxtest',//url+ファイル名 .htmlは省略可
                        dataType:'html',//他にjsonとか選べるとのこと
                    }).done(function (results){
                        $('#text').html(results);//展開したいタグのidを指定
                    }).fail(function(jqXHR,textStatus,errorThrown){
                        alert('ファイルの取得に失敗しました。');
                        console.log("ajax通信に失敗しました")
                        console.log(jqXHR.status);
                        console.log(textStatus);
                        console.log(errorThrown.message);
                    });
                }
            );
        });
    </script>

    <input type="button" id="button" value="AjaxTest"><br/>
    <div id="text"></div>

パスにハマる

ここからが本題ですが、bladeの場合どこに置くかでかなり迷います。
上記のコードがあるフォルダに一緒に入れておけばすぐできそうですが、ただ置いただけでは４０４が出ます。
しかもブラウザの開発画面でしか404を確認できないので謎のエラーにハマりました。
結論から言うと他のblade.phpファイルと同じようにweb.phpとControllerに追記すればパスが通ります。
Controllerから return viewで指定するのがポイント。

なんでそんなことになるかと言うと、呼び出し元のphpファイルがルーティングによってファイルの場所と違うところをアドレスに指定されているからで、上記のコードのURLの相対パスはその飛ばした先のURLからの相対パスになるからです。

例えば以下のルーティングをしているファイルに上記コードがあるとする。

web.php
Route::get('/' ,'SampleController@index_get');

そうするとURLは http://127.0.0.1:8000/ とかになりますね。
じゃあこれは開発フォルダでいうとどこって言えばpublicフォルダの直下になる。
だからweb.phpに記述しなくてもそこへ置いたらパスが通ります。
ただ、それだとajaxで呼ぶファイルだけ他のソースファイルと全然違うところに置くことになるので困るわけです。

だから

web.php
Route::get('/ajaxtest' ,'SampleController@ajaxtest_get');

という感じで追記して SampleControllerに function ajaxtest_get(){何たらかんたら}
という感じでいけます。

GoogleCromeの場合パスさえ通れば、こんな感じで詳しいエラーが見えるようになるので開発メニューで調べるといいです。

Ajaxのデバッグのやり方について

ここの記事が秀逸だったのでリンク載せておきます。