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

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

ただいまの
回答率

88.19%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,738

shin1977

score 14

HTMLでHPを作っています。

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

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+2

具体的には、HTML内のJSで一定の動作をしたときに、外部phpファイルを読み込み、そのデータを、
メインのHTML内で反映して表示させたいです。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/14 23:08

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

    キャンセル

  • 2018/03/14 23:20

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

    キャンセル

+2

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

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

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

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

1.phpの環境を作ってある
2.データベース環境を作ってある
3.phpからデータベースにアクセスできる
4.データベースで取得したデータをweb上に表示できる

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/14 23:53

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

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

    キャンセル

  • 2018/03/14 23:56

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

    キャンセル

  • 2018/03/15 00:02

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/14 23:04

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

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/14 23:40

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

    キャンセル

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

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る