質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

469閲覧

移行したレンタルサーバーでjQueryの$.getJSON()が動作するようにしたい

M25605301621

総合スコア9

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2024/03/05 02:30

実現したいこと

移行したレンタルサーバーで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\">&nbsp;(".$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"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2024/03/05 04:37

success時だけでなくfailもとってエラーハンドリングで起きてる現象追及してみてください。 https://api.jquery.com/jQuery.getJSON/ done / fail などを明示的に書きます。
guest

回答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
yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

M25605301621

2024/03/05 05:15

回答ありがとうございます。 $.getJSONの処理内に"callback=?"が含まれているのでjsonpかな…と思っています。 サーバーサイド(レンタルサーバー)のApacheなりnginxがjsonp対応かどうかも調べてみます!
yambejp

2024/03/05 05:44

追記しておきました テストしてみてください
M25605301621

2024/03/06 10:06

ご丁寧に追記いただきありがとうございます! ですが、まだいただいたテストコードが試せていないです…すみません。 getJsonの第一引数での指定phpの処理を見ていると、MySQLやPHPのエラー(大昔の旧環境では動いていた)が大量に見つかり、それをつぶしているところです。 第一引数のphpではDB処理(INSERT,UPDATE)を行っている(15、16行目)のですが、そちらは動作していることが確認できました。どうも該当コードでいうところの18~27行目の処理(第3引数の戻り)だけが走っていないような感覚です。 もう少しあがいてみます…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問