PHPとJava scriptのデータの受け渡し

前提・実現したいこと

今現在PHP,Javascriptを用いてデータベースに保存している緯度経度のを読み込み、マッピングするシステムを作成しています。
今現在はPHPでXAMPP内のMariaDBから緯度経度の情報を取得するところまでできています。ですが、マッピングするために使用する「mapbox」はPHPでは使えそうもないので、PHPで取得したデータ（配列）をJavascriptに渡す必要があります。しかし、そのデータのやり取りがうまくいきません。

PHP,Java scriptは授業で使ったことがある程度です。

[追加]
PHPとJava scriptのデータの受け渡し方法として非同期通信「Ajax」を使用するとよいとご指摘いただいたので、下記サイトのソースコードを自分の実行環境で動くのか確認することにしました。

参考サイト
http://vbnettips.blog.shinobi.jp/javascript/javascript%20jquery%E3%81%A7ajax%E3%82%92%E4%BD%BF%E3%81%84p

発生している問題・エラーメッセージ

取得エラー

該当のソースコード

database.html
1<html>
2<head>
3<meta charset="utf-8">
4<title>test ajax</title>
5<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
6<script type="text/javascript">
7//Ajax関数
8function getData() {
9    // マスタデータの取得
10    $.ajax({
11        type: "POST"
12      , url: "http://localhost/Connect.php"
13      , data: { id: $("#id").val() }
14    }).done(function(res){
15        // ajaxがOK
16        $("#msg").text(JSON.parse(res));
17    }).fail(function() {
18        // 取得エラー
19        alert('取得エラー');
20    }).always(function() {
21        // 後処理(処理することが在れば)
22    });
23    return false;
24}
25</script>
26</head>
27<body>
28    <h2>test ajax json</h2>
29    ID:<input type="text" id="id" size="10" maxlength="10" /><br />
30    <p id="msg">テストメッセージ</p>
31    <button onclick="getData();">Ajax</button>
32</body>
33</html>

Connect.php
1<?php
2// 処理モードの取得
3$id = -1;
4if (isset($_POST["id"]) == true && $_POST["id"] != "") {
5    $id = intval($_POST["id"]);
6}
7// マスタ風の仮のデータ
8$arrData = array(
9    0 => "@@@@@@"
10   ,1 => "AAAAAA"
11   ,2 => "BBBB"
12   ,3 => "CCCCCCCC"
13);
14 
15$strRet = "";
16if (0 <= $id && $id <= 3) {
17    $strRet = $arrData[$id];
18}
19 
20// 結果を返す
21echo(json_encode($strRet));

試したこと

補足情報（FW/ツールのバージョンなど）

実行環境 XAMPP x3.3.0
htmlファイルはtomcatサーバ
PHPファイルはapacheサーバ上に配置

行動規範の内容に同意します

回答3件

非同期通信を試したとのことですが、非同期通信で実現可能です。
(サーバーサイドのきっかけでデータを渡したいとのことでしたら、Socket.ioを調べてみてください)

PHPでAjax通信を使う方法を現役エンジニアが解説【初心者向け】
質問のソースの初めに$_GET or $_POSTによる条件を書き加え、取り出したデータをJSONに変換して出力します(生の配列データは渡せないのでJSONに変換します)。

Fetch の使用
クライアント側ではJavaScriptによるGET or POST送信→レスポンスのJSONを配列に変換することで配列をそのまま渡すことが可能です。

投稿2021/12/11 06:10

NeRight719

総合スコア47

Atsku

2021/12/11 06:42

回答ありがとうございます。 $_GETと$_POSTはどちらを使うのがよいのでしょうか?

NeRight719

2021/12/11 07:15

基本的にGETは情報取得、POSTは情報の更新や大きめのデータの送信に使われます。今回のように緯度経度情報を引き出すだけであればGETで大丈夫です。例えばJavaScript側から渡された文字列でDBを書き換える(更新する)場合などはPOSTを使うといいと思います。

Atsku

2021/12/11 07:36

ありがとうございます。

行動規範の内容に同意します

ベストアンサー

様々やり方はありますがJavascriptからリクエストを送って欲しい情報だけPHPからレスポンスとして返すのが妥当です。

「非同期通信」「Ajax」などのキーワードで調べてください。

追記を受けて

現状では「起きてる現象」が提示されてないので「起きてる問題の確認方法」のみを提示します。

ブラウザ開発ツールのコンソールに何か出てないか確認を
}).done(function(res){ の節でconsole.log(res)を入れる
}).fail(function() {ここは「例外を握りつぶす」ようなことがされています。ドキュメントにあるようにfail()はjqXHR, textStatus, errorThrownと3つのコールバック引数があるので、それぞれ確認してください。

js
1    }).done(function(res){
2        console.log(res)
3        // ajaxがOK
4        $("#msg").text(JSON.parse(res));
5    }).fail(function(j,t,e) {
6        console.log(j)
7        console.log(t)
8        console.log(e)
9        // 取得エラー
10        alert('取得エラー');
11

投稿2021/12/11 05:44

編集2021/12/11 08:15

m.ts10806

総合スコア80875

Atsku

2021/12/11 07:09

回答ありがとうございます。非同期通信は「Ajax」,「XMLHttpRequest」,「Fetch API」などを用いる方法はありますが、それを用いる方法が一般的なのでしょうか

m.ts10806

2021/12/11 07:26

はい。実現可能です。できなかったのは理解不足であると言えます（どう書いて何が起きたのか書いてないので想像でしかないですが）

Atsku

2021/12/11 07:36

もう一度Ajaxについて調べ、下記サイトのソースコードが自分の実行環境で動くのか確認してみました。ですが、取得エラーと表示されてしまいます。これは自分の実行環境が良くないのでしょうか ”http://vbnettips.blog.shinobi.jp/javascript/javascript%20jquery%E3%81%A7ajax%E3%82%92%E4%BD%BF%E3%81%84”

m.ts10806

2021/12/11 07:38

質問本文更新してください。参考先はあくまで参考先であり、ご自身が書かれたものとは全く別物です。「実行環境」がバージョンまで提示されてないので何とも言えません。 OSも必要でしょうし、他者がコピペで再現できる内容になっていません。そもそも「取得エラー」だけなわけがないので、エラーメッセージ詳細・エラーログ確認してください

Atsku

2021/12/11 08:03

質問を更新させていただきました

m.ts10806

2021/12/11 08:16

ところでどうしてtomcat

Atsku

2021/12/11 08:47

Java scriptファイルではapacheでは実行できず、tomcatで実行できたため, 今回もtomcatを使用しました

Atsku

2021/12/11 08:54

追記を受けてに記載されているコードを追加・実行して、コンソールを確認したところ「Connect.html:1 Access to XMLHttpRequest at 'http://localhost/Connect.php' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.」このようになっていました。 jquery-3.2.1.min.js:4 POST http://localhost/Connect.php net::ERR_FAILED 200

m.ts10806

2021/12/11 09:50

>Java scriptファイルではapacheでは実行できず、tomcatで実行できたため, 関係ないです。 JavaScriptはフロントサイドの機能なのでWebサーバがどんな構成かは関係ありません。 >コンソールを確認したところ CORSですね。セキュリティ上の制約です。 https://developer.mozilla.org/ja/docs/Web/HTTP/CORS portが違うとサイトも違う（オリジンではない）ので異なるサイト間でAjaxリクエストが許可されていないということになります。 Ajaxリクエストをするサーバと受けるサーバは同じWebサーバでないといけません。なので、PHPが主なら、リクエストをする方もPHPと同じサーバで動かさないといけません。 Tomcat側は使えません。

Atsku

2021/12/12 01:40

返信が遅くなり申し訳ありません。 > JavaScriptはフロントサイドの機能なのでWebサーバがどんな構成かは関係ありません。 htmlファイル内に<script></script>を用いてJava scriptを実行することは確認できましたが、外部ファイルとして.jsをhtmlから参照すると正しく実行がされませんでした。

m.ts10806

2021/12/12 01:42

いずれにしてもWebサーバの問題ではないですね。正しくリンクされてないからでは。コンソールでエラー確認を。

Atsku

2021/12/12 02:01

自分でいろいろ調べて、修正してみると外部ファイルとして.jsを参照できました。勉強不足であるにも関わらず、ご教授いただきありがとうございました。

m.ts10806

2021/12/12 08:28 編集

解決したのかどうか進捗がわからないので、もう少しきちんとフィードバックください。

Atsku

2021/12/13 00:40

返信が遅くなり申し訳ありません。 htmlファイルをphpファイルと同じapacheサーバ上に配置、 >>HTMLファイル , url: "http://localhost/Connect.php"を, url: "./Connect.php" に変更すると動作しました。

m.ts10806

2021/12/13 00:44

わかりました。で、それは解決なのかまだ問題があるのかを教えてほしいのですが（＝フィードバック）

Atsku

2021/12/13 01:19

質問させていただいた内容については問題解決しました。これを踏まえて、phpファイルからデータベースのデータを取得し、htmlファイルで画面表示できるのか検証します。

m.ts10806

2021/12/13 03:23

本件解決したのでしたらまだ「受付中」になっているので締めてください。

行動規範の内容に同意します

tomcatサーバとapacheサーバ、
それぞれLISTENするポート番号があるはずなので、
まずそれを確認しましょう。

$.ajax()が失敗している理由として考えたのが、
phpが動作しているwebサーバー（apacheサーバ）の
ポート番号が80じゃない場合には、

url: "http://localhost:10080/Connect.php"

みたいにポート番号をホスト名に添えないと到達しません。

投稿2021/12/11 08:15

退会済みユーザー

総合スコア0

Atsku

2021/12/11 08:51

apacheは80,443　tomcatは8005,8080,64344,64345,64347,64348と複数記載されていて、実際どのポート番号で動いているのかわかりません。確認する方法はありますか？

退会済みユーザー

2021/12/11 10:35

XAMPPを使っておられるようなのでWindows前提の説明を加えますと、コマンドプロンプト上で、netstat -nao というコマンドを実行しますと、状態がLISTENINGとなっているプログラムのポート番号とプロセス番号がわかります。タスクマネージャー上で詳細タブを開き、表示するカラムにPIDとコマンドラインを加え、先ほどLISTENINGとなっているプロセス番号と突き合わせして絞り込めるかと思います。

Atsku

2021/12/12 01:28

分かりました。

行動規範の内容に同意します

あなたの回答