します。
laravel5.5、php7系を利用しています。
やりたいことは
ajaxでapiを叩いてjson（配列）を取得し、その情報を利用してdomを追加していきます。
実装
api
json形式の文字列をreturnする関数と、その関数を呼ぶルーティングを作るだけです。
web.phpでルーティングして、Controllerに関数を追加します。
ルーティングはこれを参考にしました。
最後の特殊なやつ？ で実装しました。
Route::get('api/v1/hoges/find/{page}', 'HogeController@getHoge');
コントローラーの方はこんな感じ。
public function getHoge($page) {
$count = getenv('HOGE_COUNT');
$hoge = HOGE::OrderByDesc('id')
->skip(($page - 1) * $count)
->take($count)
->get(['id', 'Hoge', 'Fuga']);
// json形式の文字列に変換してreturn
return json_encode($hoge);
}
ルーティングからpageを受け取って、一度に取得する行をcountに設定します。
で、ページ数ぶんの行を読み飛ばして、対応する行だけを返します。
page=1, count=5 なら 1 ~ 5 行目
page=2, count=5 なら 6 ~ 10 行目
page=2, count=10 なら 11 ~ 20 行目
みたいな。
もっとスマートなやり方があるような気しかしません。
ともあれ意外に簡単に実装できました。
作成したurlにブラウザでアクセスすると、確かにただの文字列が表示されます。
ajax
こちらを参考にしました。
ajaxのtypeをGETにして、urlは上記apiを指定します。
dataはPOSTのときのパラメータっぽいので外しました。
主な変更点はdoneの中身ですね。
result = JSON.parse(result);
$(result).each(function (index, element) {
$('.hoge').append(
'<div>' + element.Hoge + '</div>' +
'<div>' + element.Fuga + '</div>' +
'<div><a href="hoges/"' + element.id + '"><img src="/img/img.jpg" /></a></div>'
);
});
loadPage++;
skipFlg = true;
jsonが返ってくるので、JSON.Parseでオブジェクトに変換してループさせます。
ついでにローディングを表示
apiを呼んで表示するまでに微妙に時間がかかるので、ローディングしていることがわかる何かを表示します。
（秒単位で時間がかかるので、まず処理速度をなんとかすべきか……とも思いつつ）
<div class="loading is-hide">〜〜</div>のis-hideを外したり付けなおしたりします。
div要素とcssを追加したところ、すんなりと動いてくれました。
$.ajax({
type: "GET",
contentType: "application/json",
// コンテンツ読み込み先URL
url: "/api/v1/hoges/find/" + loadPage,
beforeSend: function(){
$('.loading').removeClass("is-hide"); //ローディングを表示
},
}).done(function (result) {
result = JSON.parse(result);
$(result).each(function (index, element) {
$('.hoge').append(
'<div>' + element.Hoge + '</div>' +
'<div>' + element.Fuga + '</div>' +
'<div><a href="hoges/"' + element.id + '"><img src="/img/img.jpg" /></a></div>'
);
});
$('.loading').addClass("is-hide"); //ローディングを非表示
loadPage++;
skipFlg = false;
}).fail(function (ex) {
...
遅延させる方法については、もともと重いので不要かなと思い実施していません。
挫折ポイント
api
コントローラーとか関数名ってどうすれば……？
挫折はしてないんですが数秒ほど悩みました。
別途コントローラーを作成すべきなんですかね。
あと関数名ってどうすれば。
わからーないーわからーないーままでー
ajax
おそらくif文の条件が間違ってる
skipFlgがfalseから始まるので、! skipFlgにしないと動きません。
$.ajaxがないとか言われた
jQueryのライブラリがスリム版だとajaxが入ってないそうです。
スリム版ではない短縮版を入れたら動きました。
ローディング
$loadingってなんだよ！ってなった
よく見たら最初にvar $loading = $(".loading");とかやってました。
目と頭が悪かったです……。
まとめ
ajaxでapi叩いてページ遷移なしにローディングを実現できました。
わーい。
今回使ったパラメータ以外にもいろいろ使えるようなので、何があるのか知りたい……POSTとかちょっと何するかイメージできてないレベル……。
といいつつ必要ないので勉強は後回しですが。
ajaxという技術が使われてたサイトの保守とかいままでけっこうやってたんですけど、こうして触ったのは初めて、へーこいつがあの噂に名高いアレかーってなってました。
そもそもjQueryに入ってるライブラリってことを今回初めて知ったという……。
知識が貧弱すぎてちょいちょいこいつ大丈夫かなって我ながら心配になります。