![\\\"\".$value[\"pref_name\"].\"\\\"](\\\"../_img/school/pref_\".$value[\"area_id\"].\"_\".$value[\"pref_map_type\"].\".png\\\")
![\\\"\".$value[\"pref_name\"].\"\\\"](\\\"../_img/school/pref_none_\".$value[\"pref_map_type\"].\".png\\\")
Q&A
success時だけでなくfailもとってエラーハンドリングで起きてる現象追及してみてください。
https://api.jquery.com/jQuery.getJSON/
done / fail などを明示的に書きます。
実現したいこと
移行したレンタルサーバーでjQueryの$.getJSON()が動作するようにしたい
前提
旧環境(PHP5系+MySQL)から新環境(PHP8系+MySQL)へのWebアプリケーション移行を行っています。
旧PHPのバージョンが古く、変数の宣言等を各phpソースを確認しながら修正し、MySQLのDBの値をphpから取得し
Webページに表示するところまでは漕ぎつけているのですが、クロスドメイン対策として組まれていた
通信(jQueryの$.getJSON())がうまくいかず、エラーも出力されない状態です。
発生している問題・エラーメッセージ
$.getJSON()の実行結果がhtmlに反映されない(返ってこない)
console.log("msg_start")とconsole.log("msg_end")は出力されるが、
その間のconsole.log("data=" + JSON.stringify(data));
console.log($(".choose-pref").attr("style"));は出力されない
該当のソースコード
index.html
1<head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,shrink-to-fit=no"> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <title>***</title> 6 <meta name="description" content="***"> 7 <meta name="keywords" content="***"> 8 <script src="../js/jquery-1.12.4.js"></script> 9 <script type="text/javascript"> 10 $(function () { 11 $(".area-map>ul>li>a").on("click", function () { 12 console.log("msg_start"); 13 chooseAreaParam = $(this).attr("href");//クリック対象からhrefの値を取得(0~5の数値) 14 $.getJSON( 15 "step1.php?callback=?", //第一引数 16 { "area": chooseAreaParam }, //第二引数 17 function (data) {//第三引数 18 console.log("data=" + JSON.stringify(data)); 19 $(".area-name").text(data[0]); 20 $(".pref-map").html(data[1]); 21 $(".pref-list").html(data[2]); 22 setTimeout( 23 function () { 24 console.log($(".choose-pref").attr("style")); 25 $(".choose-pref").removeAttr("style"); 26 } 27 , 500); 28 } 29 ) 30 console.log("msg_end"); 31 }); 32}); 33</script> 34 35```step1.php 36<?php 37$callback = "jsonCallback"; 38if(isset($_GET["callback"])){ 39 $callback=$_GET["callback"]; 40} 41$Path = "../"; 42$Path = "../"; 43include("/home/kankyo/php/hoge/pdo_config.php"); 44include("/home/kankyo/php/hoge/pdo_trial_step1.php"); 45?> 46 47```pdo_trial_step1.php 48<?php 49ini_set('opcache.enable', 0); 50echo '<script>'; 51echo 'alert("pro_trial_step1.php入った")'; 52echo '</script>'; 53 54if(isset($_GET["area"])){ 55 $area = $_GET["area"]; 56 57 try { 58 // データベースに接続 59 $pcci_school_pdo = new PDO( 60 $pcci_school_dsn, 61 $username, 62 $password, 63 $driver_options 64 ); 65 66 $where_honban="and mst_school.SYSTEM_TEST !=1 "; 67 $pdo_area_pref_query =" 68 SELECT 69 mst_school_pref.ID AS pref_id, 70 mst_school_pref.AREA_ID AS area_id, 71 mst_school_pref.NAME AS pref_name, 72 mst_school_pref.NAME_ABC AS pref_name_abc, 73 mst_school_pref.MAP_TYPE AS pref_map_type, 74 mst_school.ID AS school_id, 75 mst_school.NAME AS school_name 76 FROM mst_school_pref left join mst_school on mst_school_pref.ID = mst_school.PREF_ID 77 WHERE mst_school_pref.IS_DELETE != 1 and mst_school_pref.AREA_ID = ? ".$where_honban; 78 79 $stmt = $pcci_school_pdo->prepare($pdo_area_pref_query); 80 $stmt->bindValue(1, (int)$area, PDO::PARAM_INT); 81 $stmt->execute();//キャスト 82 $area_row = $stmt -> fetchAll(PDO::FETCH_ASSOC); 83 84 $getpref = []; // $getprefを初期化 85 $exist = []; // $existを初期化 86 $inner_left = ''; // $inner_leftを初期化 87 88 foreach ($area_row as $key => $value) { 89 if($value["school_id"]){ 90 if (!isset($getpref[$value["pref_id"]]) || !$getpref[$value["pref_id"]]){ 91 $getpref[$value["pref_id"]] = 0; 92 } 93 if (!isset($exist[$value["school_id"]]) || !$exist[$value["school_id"]]) { 94 $exist[$value["school_id"]] = 0; 95 } 96 if ($getpref[$value["pref_id"]] != 1 && $exist[$value["school_id"]] != 1) { 97 $inner_left .= "<li class=\"pref_id_".$value["pref_id"]." map_type_".$value["pref_map_type"]." pref_active\"><a href=\"".$value["pref_id"]."\"><span class=\"pref_active__name\">".$value["pref_name"]."</span><img src=\"../_img/school/pref_".$value["area_id"]."_".$value["pref_map_type"].".png\" alt=\"".$value["pref_name"]."\" /></a></li>\n"; 98 $getpref[$value["pref_id"]] = 1; 99 $exist[$value["school_id"]] = 1; 100 } 101 } else { 102 $inner_left .= "<li class=\"pref_id_".$value["pref_id"]." map_type_".$value["pref_map_type"]." \"><img src=\"../_img/school/pref_none_".$value["pref_map_type"].".png\" alt=\"".$value["pref_name"]."\" /></li>\n"; 103 } 104 } 105 $area_school_query =" 106 SELECT 107 mst_school_area.ID AS area_id, 108 mst_school_area.NAME AS area_name, 109 mst_school_pref.NAME AS pref_name, 110 mst_school.PREF_ID AS pref_id, 111 mst_school.ID AS school_id, 112 mst_school.NAME AS school_name, 113 COUNT(*) AS school_count 114 FROM (mst_school left join mst_school_pref on mst_school.PREF_ID = mst_school_pref.ID) left join mst_school_area on mst_school_pref.AREA_ID = mst_school_area.ID 115 WHERE mst_school.IS_DELETE != 1 ".$where_honban." and mst_school_pref.AREA_ID = ? 116 GROUP BY mst_school.PREF_ID 117 ORDER BY pref_id 118 "; 119 120 $stmt2 = $pcci_school_pdo->prepare($area_school_query); 121 $stmt2->bindValue(1, (int)$area, PDO::PARAM_INT); 122 $stmt2->execute();//キャスト 123 $area_school_row = $stmt2 -> fetchAll(PDO::FETCH_ASSOC); 124 125 $map_pref__right=""; 126 foreach ($area_school_row as $key => $value) { 127 128 $area_name=$value["area_name"]; 129 130 $map_pref__right.=" <li><a href=\"".$value['pref_id']."\"><span class=\"right__prefName\">".$value['pref_name']."</span>XXX<span class=\"right__classCount\"> (".$value['school_count'].")</span></a></li>\n"; 131 } 132 133 $area_data=array($area_name,$inner_left,$map_pref__right); 134 //JSON形式で出力しないと取得できない 135 $jsontext = json_encode($area_data,JSON_UNESCAPED_UNICODE); 136 137//header("Content -type: application/x-javascript"); 138print <<<END 139$callback($jsontext); 140END; 141 } catch (PDOException $e) { 142 header("Content-Type: text/plain; charset=UTF-8", true, 500); 143 exit($e->getMessage()); 144 145 } 146} 147 ?> 148### 試したこと 149jQuery.jsはダウンロードしてローカル読込に変更 150$.getJSON処理のシングルクォーテーションをダブルクォーテーションに変更 151root/.htaccessを下記のように変更 152 AddHandler application/x-httpd-php .html 153 Header set Access-Control-Allow-Origin: "*" 154 AddType application/x-javascript .html 155 AddType application/x-javascript .php 156 php_flag opcache.enable Off 157ブラウザの開発者ツールで取得したリクエストURLを手動で叩くと、step1.php 冒頭に仕込んだ 158デバッグ用alertが実行される。index.htmlから$.getJSON実行時にはstep1.phpが動作している様子が確認できない。 159 160### 補足情報（FW/ツールのバージョンなど） 161下記はブラウザ(Chrome)でネットワークのリクエスト・レスポンスのログを見た結果です。 162 163新環境(動作していない方。) 164 ○全般 165 リクエスト URL: 166 http://new.kankyo.jp/hoge/free-trial/step1.php?callback=jQuery1124045532514672187907_1709600430346&area=0&_=1709600430347 167 リクエスト メソッド: GET 168 ステータス コード: 200 OK 169 参照ポリシー: strict-origin-when-cross-origin 170 171 ○レスポンスヘッダー 172 HTTP/1.1 200 OK 173 Server: nginx 174 Date: Tue, 05 Mar 2024 01:00:33 GMT 175 Content-Type: text/html; charset=UTF-8 176 Transfer-Encoding: chunked 177 Connection: keep-alive 178 Access-Control-Allow-Origin: * 179 Content-Encoding: gzip 180 181 ○リクエストヘッダー 182 GET /hoge/free-trial/step1.php?callback=jQuery1124045532514672187907_1709600430346&area=0&_=1709600430347 HTTP/1.1 183 Accept: text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01 184 Accept-Encoding: gzip, deflate 185 Accept-Language: ja,en-US;q=0.9,en;q=0.8 186 Connection: keep-alive 187 Cookie: _ga=GA1.1.1596837367.1709529312; __utmc=187144882; __utmz=187144882.1709529322.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utma=187144882.1596837367.1709529312.1709539989.1709595235.4; _ga_DQCHS4V60K=GS1.1.1709599563.5.1.1709599566.0.0.0; __utmt=1; __utmb=187144882.70.10.1709595235 188 Host: new.kankyo.jp 189 Referer:http://new.kankyo.jp/hoge/free-trial/ 190 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 191 X-Requested-With: XMLHttpRequest 192 193 194旧環境(動作している方。) 195 ○全般 196 リクエスト URL: 197 https://old.kankyo.com/free-trial/step1.php?callback=jQuery112408525816866942546_1709600290155&area=0&_=1709600290156 198 リクエスト メソッド: GET 199 ステータス コード: 200 OK 200 参照ポリシー: strict-origin-when-cross-origin 201 202 ○レスポンスヘッダー 203 HTTP/1.1 200 OK 204 Date: Tue, 05 Mar 2024 00:59:33 GMT 205 Server: Apache 206 X-ChromeLogger-Data: eyJ2ZXJzaW9uIjoiNC4xLjAiLCJjb2x1bW5zIjpbImxvZyIsImJhY2t0cmFjZSIsInR5cGUiXSwicm93cyI6W1tbIkhlbGxvIGNvbnNvbGUhXHU2NWU1XHU2NzJjXHU4YTllXHUzMDgyT0syIl0sIlwvaG9tZVwva2lyOTc5NTA3XC9waHBcL3BjY2lfc2Nob29sXC9wZG9fdHJpYWxfc3RlcDEucGhwIDogMyIsIiJdXSwicmVxdWVzdF91cmkiOiJcL2ZyZWUtdHJpYWxcL3N0ZXAxLnBocD9jYWxsYmFjaz1qUXVlcnkxMTI0MDg1MjU4MTY4NjY5NDI1NDZfMTcwOTYwMDI5MDE1NSZhcmVhPTAmXz0xNzA5NjAwMjkwMTU2In0= 207 MS-Author-Via: DAV 208 Content-Length: 2812 209 Connection: close 210 Content-Type: application/x-javascript 211 212 ○リクエストヘッダー 213 GET /free-trial/step1.php?callback=jQuery112408525816866942546_1709600290155&area=0&_=1709600290156 HTTP/1.1 214 Accept: text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01 215 Accept-Encoding: gzip, deflate, br, zstd 216 Accept-Language: ja,en-US;q=0.9,en;q=0.8 217 Connection: keep-alive 218 Host: www.old.kankyo.com 219 Referer: https://old.kankyo.com/free-trial/ 220 Sec-Fetch-Dest: empty 221 Sec-Fetch-Mode: cors 222 Sec-Fetch-Site: same-origin 223 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 224 X-Requested-With: XMLHttpRequest 225 sec-ch-ua: "Chromium";v="122", "Not(A:Brand";v="24", "Google Chrome";v="122" 226 sec-ch-ua-mobile: ?0 227 sec-ch-ua-platform: "Windows"
回答1件
0
CORS対策であればjsonpで処理する方が楽かもしれません
追記
callback=?"が含まれているのでjsonpかな…
なるほど、jsonpを前提としている処理なのですね。
いったん$.ajaxで確認してみるのはどうでしょう？
javascript
1$(function(){ 2 $.ajax({ 3 url:"http://example.com/sample.php", 4 data:{a:1,b:2,}, 5 dataType:'jsonp', 6 cache:true, 7 jsonpCallback:'test', 8 }).done(function(data){ 9 console.log(JSON.parse(data)); 10 }); 11});
こうすると「http://example.com/sample.php?callback=test&a=1&b=2」へjsonpを取りに行きます
戻り値が「test(JSONデータ)」になるなら得られたjsonデータを解釈できるはずです
もちろんjsonpのデータが正しいjsonをコールバックしていないデータだった場合は正しいjsonは取得できません。
なおjsonpであればCORSに処理を阻害されることはありません
投稿2024/03/05 02:39
編集2024/03/05 05:44
総合スコア118164
回答ありがとうございます。
$.getJSONの処理内に"callback=?"が含まれているのでjsonpかな…と思っています。
サーバーサイド(レンタルサーバー)のApacheなりnginxがjsonp対応かどうかも調べてみます！
追記しておきました
テストしてみてください
ご丁寧に追記いただきありがとうございます！
ですが、まだいただいたテストコードが試せていないです…すみません。
getJsonの第一引数での指定phpの処理を見ていると、MySQLやPHPのエラー(大昔の旧環境では動いていた)が大量に見つかり、それをつぶしているところです。
第一引数のphpではDB処理(INSERT,UPDATE)を行っている(15、16行目)のですが、そちらは動作していることが確認できました。どうも該当コードでいうところの18~27行目の処理(第3引数の戻り)だけが走っていないような感覚です。
もう少しあがいてみます…
あなたの回答
tips
プレビュー
