こちらの記事からの続き
- セレクトボックスのchangeイベントでajaxを走らせる
- php側でapiを叩きデータ取得、jsonでJSへ返す
- phpから受け取ったデータを処理、htmlへ表示
の部分を実装してゆきます。
JS
name = “destination” のセレクトボックスがチェンジしたら、
をトリガーにajax処理が走ります。
$('[name = "destination"]').on('change', function () { var destination = $(this).val(); $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), }, url: '/api/weather', type: 'GET', data: { 'destination': destination }, dataType: 'json', }) .done(function (response) { var $weatherWrap = $('#js_weatherWrap') $weatherWrap.html(""); //前回の取得内容をリセット var block = '<div class="col">' + '<p>今のお天気:' + response.data + '</p>' + '<p><img src="https://openweathermap.org/img/wn/' + response.icon + '@2x.png"></p>' + '</div>'; $weatherWrap.append(block); }) .fail(function () { console.log("failed"); })
・GETで /api/weather にリクエストを飛ばす ・jsonデータを受け取る ・htmlで現在表示している内容をリセット ・受け取ったデータをforeachでhtmlへ追加
という流れになっています。
Controller
ajaxからリクエストを受け取るphp側はこんな感じです
public function getWeather(Request $request) { $destination = $request->destination; $lat = config('const.positions.' . $destination . '.lat'); $lon = config('const.positions.' . $destination . '.lon'); $appid = config('const.api.weather.key'); $url = "http://api.openweathermap.org/data/2.5/weather/?lat={$lat}&lon={$lon}&appid={$appid}"; $weather_json = file_get_contents($url); $weather_array = json_decode($weather_json, true); return response()->json( [ 'data' => $weather_array['weather'][0]['main'], 'icon' => $weather_array['weather'][0]['icon'], ] ); }
file_get_conentsで対象urlのデータを読み込み、配列に直しています。そして配列から必要なお天気データJSへ返しています。
JSで受け取ったあとの処理は↑のJSファイル、.done 以降に記載の通りです。
これで、無事お天気情報が表示されました!
でも、肝心のお天気情報の精度はイマイチなような。。。