以下2つのコードはPHPに値を送り配列を取得するコードです。またこのコードは参考サイト内のコードをそのままコピーしております。このイベントを発生させると
Failed to load resource: the server responded with a status of 404 (Not Found)
と表示され詳細を確認すると[object][object]と書かれています。イベント内の内容を単に文字色を変える等にした場合は機能しますので、読込みなどは問題ない気がします。参考サイトのコードでは[;]が書かれていないのでそれが問題かと思い修正をしたコードが一番下ですが、エラー内容も同じです。解決策をお願いします。
JS
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>Sample</title> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 8</head> 9 10<body> 11 <select id="sel"> 12 <option> --場所を選ぶ-- </option> 13 <option value="kyoto">京都</option> 14 <option value="osaka">大阪</option> 15 <option value="kobe">神戸</option> 16 </select> 17 <div id="mes"> 18 集合場所は<span id="pos"> 19 <!-- ここに集合場所が入る --></span>、 20 集合時刻は<span id="time"> 21 <!-- ここに集合時刻が入る --></span>となります。 22 </div> 23</body> 24 25<script> 26 let optval; 27 $(function() { 28 $('#sel').on("change", function() { 29 optval = $(this).val(); //選択したメニューの値 30 $.post({ 31 url: 'ajax_getData.php', 32 data: { 33 'opt': optval 34 }, 35 dataType: 'json', //必須。json形式で返すように設定 36 }).done(function(data) { 37 //連想配列のプロパティがそのままjsonオブジェクトのプロパティとなっている 38 $("#pos").text(data.position); //取得した集合場所の値を、html上のID値がposの箇所に代入。 39 $("#time").text(data.ap_time); //取得した集合時刻の値を、html上のID値がtimeの箇所に代入。 40 }).fail(function(XMLHttpRequest, textStatus, errorThrown) { 41 alert(errorThrown); 42 }) 43 }) 44 }) 45</script> 46</html>
PHP
1<?php 2 header("Content-Type: application/json; charset=UTF-8"); //ヘッダー情報の明記。必須。 3 $ary_sel_obj = []; //配列宣言 4 $opt = filter_input(INPUT_POST, "opt"); //変数の出力。jQueryで指定したキー値optを用いる。 5 //リスト情報(今回は配列にしているが、オブジェクトでも同様のJSON形式で受け取ることができる) 6 $ary_lists = [ 7 "kyoto" => [ 8 "position" => "四条河原町駅", 9 "ap_time" => "8:30", 10 ], 11 "osaka" => [ 12 "position" => "梅田駅", 13 "ap_time" => "9:00", 14 ], 15 "kobe" => [ 16 "position" => "三宮駅", 17 "ap_time" => "9:30", 18 ], 19 ]; 20 if (isset($ary_lists)) { 21 $ary_sel_obj = $ary_lists[$opt]; 22 } //連想配列のプロパティから値を取得 23 echo json_encode($ary_sel_obj); //jsonオブジェクト化。必須。配列でない場合は、敢えてjson化する必要はない 24 exit; //処理の終了 25
JS
1//JS内のみ修正 2<script> 3 $(function() { 4 $('#sel').on("change", function() { 5 var optval = $(this).val(); 6 $.post({ 7 url: 'ajax_getData.php', 8 opt: optval 9 }).done(function(data) { 10 $("#pos").text(data.position); 11 $("#time").text(data.ap_time); 12 }); 13 }); 14 }); 15</script>
参考サイトhttps://qiita.com/BRSF/items/e2b64416604f0ad8716a
現在のコードです。
JS
1<script> 2 $(function() { 3 $('#sel').on("change", function() { 4 var optval = $(this).val(); 5 console.log(optval); 6 $.post( 7 'ajax_getData.php', 8 { 9 opt:optval 10 }, 11 function(data) { 12 $("#pos").text(data.position); 13 $("#time").text(data.ap_time); 14 }, 15 'json' 16 ); 17 }); 18 }); 19</script>
回答1件
あなたの回答
tips
プレビュー