HTML内にJSで動的にSQLでデータの読み込みについて

Question

HTMLでHPを作っています。

MTMLとPHP、mySQLを使って1つのページでデータベースからデータを読み出し、
表示することはできるのですが、動的に実施したいのですが実施の仕方が分かりません。

具体的には、HTML内のJSで一定の動作をしたときに、外部phpファイルを読み込み、そのデータを、
メインのHTML内で反映して表示させたいです。
JSは初心者で上手く作れないでいます。
宜しくお願い致します。

早速の回答ありがとうございます。
もう少し具体的にご質問いたします。（質問が下手ですいません）

GoogleMAPのマーカー位置をデータベースから読み込んで表示しようと考えています。
全てのデータを読み込むとかなりの数になってしまいますので、
地図を動かした度に、データベースから新しく表示座標のデータを読み込み、
JAVAでマーカーを書き直すようなプログラムを考えています。

このようなプログラムの場合、どのような作り方が良いでしょうか？
改めてよろしくお願いします。

Answer 1

googleマップのマーカー位置をデータベースからやろうとおっしゃっていますが

１．googleマップの表示ができる
２．javascriptでgoogleマップにマーカーを１つ表示できる
３．マーカーを複数表示できる
４．マーカーだけでなくテキストも出したい等のある程度のカスタマイズができる
５．地図を動かしたときのイベントを補足して座標などを出せる

phpでデータベースを取得する以前にhtmlとjavascriptでここまでできないと
データベースを取得したとしても不可能です。javascript初心者とおっしゃっていますが
ここまでできるのか、どこまでできているのか。

ここまでできてようやくデータベースと連携すべき。動的云々言っていますが
最初は静的なSQLで１０行ほど発行してマップにマーカー立てたりしてみればいいじゃないですか。

１．phpの環境を作ってある
２．データベース環境を作ってある
３．phpからデータベースにアクセスできる
４．データベースで取得したデータをweb上に表示できる

これも出来てやっとajaxを使えるスタートラインに立てるんですが…。
成果物のコードとかもないので、どんな作りがいいかと問うていますが
答えてもわかるのかどうかが全くわからないので非常に答えにくいです。

上記の中でできないことがあるのならもう少し短期的な目標を立てて
一度実際に作ってみるほうがよろしいのでは？
「道を知っていること」と「歩くこと」は違いますよ。

Comments

[shin1977]

説明不足ですいません。1～4はすでに実施済みです。単一ページでデータベースから読み込み、MAPにマーカーを無数に表示できてはいます。ただデータ量が多いので、マップを動かす度に、必要分のみをDBから読み込みたく、その手順が分からず苦戦しておりました。

MAPのスクロールのイベント発生等もできましたが、そこからどのようにDBにアクセスすれば良いか分からずにいました。
説明不足ですいません。

[shin1977]

できているのは1～5でした。

[sousuke]

phpが使えるのであればajaxで非同期に処理することになります。５が出来ているのであればデータベースに問い合わせて目的のデータが取得できるはずです。

Answer 2

具体的には、HTML内のJSで一定の動作をしたときに、外部phpファイルを読み込み、そのデータを、

メインのHTML内で反映して表示させたいです。

題名と質問文に若干のズレがあるように見えますが、上記部分だけにフォーカスするのであれば、Ajaxを使ってPHPで作ったAPIを呼び出すことで実現できるのでは無いかと思います。

Comments

[shin1977]

ネットで調べ「Ajax」が近いと思いましたが、JSで検知したときに、どのようにPHPファイルでSQLを作り、データをやり取りしていくのかイメージができないでいます。すいません、宜しくお願い致します。

[shin1977]

もう少しAjaxについて調べてみたいと思います。
ありがとうございました！

Answer 3

GoogleMapをまず出力（このとき、半径xx以内の位置のものを取得するようにしておく）★A

そのMapに対して、mousemoveかmouseupなどのイベントを取得し、

MAPが移動した時、その時点での地図の中心座標を取得
https://www.ajaxtower.jp/googlemaps/gmap2/index5.html

var map = new google.maps.Map(document.getElementById("map"), opts);

var latlng = map.getCenter();
var lat = latlng.lat();
var lng = latlng.lng();

AjaxでDBにアクセスし、取得した中心位置から、半径xx以内の位置のものを取得（★Aと同じロジック）

取得された物を複数マーカーとし、再描画
https://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

こんな感じでいけないかなと思いますが、どうですかね…。
組合わせてやって見たことが無いのでなんとも言えないですけど。

Comments

[shin1977]

具体的で大変助かります。
AjaxでDBにアクセスの部分で苦戦してしまっているので、Ajaxについて調べて見たいと思います。

Answer 4

動的にというのは、PHPに対してJSからSQLクエリを送信して、その通りの操作を行うということでしょうか。
それでしたら最悪Eval関数を使用して、クエリをデーターベースに送信するコードを実行させればいい話なのですが、そのような外部からSQLに直接命令できるシステムというのは、言い換えれば簡単に外部から除かれたり好き勝手されてしまうということです。
特にJAVASCRIPTでしたら、難読化ツールなどを使用したとしても解析できてしまうため、絶対にお勧めいたしません。

Comments

[shin1977]

ありがとうございます。質問が下手ですいません。質問文に追記しました。