JavaScriptの変数の値をPHPへ渡す

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 8,185

ryohasegawa

score 119

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>位置取得</title>
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Geolocation Sample</title>
</head>
<body>
<script type="text/javascript">
    if (navigator.geolocation) {
        // 現在の位置情報取得を実施
        navigator.geolocation.getCurrentPosition(
        // 位置情報取得成功時
        function (pos) { 
                var location1 = pos.coords.latitude;
                var location2 = pos.coords.longitude;
        },
        // 位置情報取得失敗時
        function (pos) { 
                var location ="<li>位置情報が取得できませんでした。</li>";
                document.getElementById("location").innerHTML = location;
        });
    } else {
        window.alert("本ブラウザではGeolocationが使えません");
    }
</script>
    <ul id="location">
    </ul>

      <?php
        //  ログ・ファイルに追記下記モードでオープン
        $file = @fopen('5-37.log', 'ab') or die('ファイルを開けませんでした!');
        //  ファイルのロック
        flock($file, LOCK_EX);
        //  ファイルの書き込み
        fwrite($file, implode("\t", $url) ."\n");
        //  ロックの解除
        flock($file, LOCK_UN);
        //  ファイルを閉じる
        fclose($file);
        print 'アクセスログを記録しました。';
      ?>
  </body>

//////////////////////////////////
追記
//////////////////////////////////
色々調べた結果、index.php(内のJavascript)でlocation1location2の値を取得し、send.phpで受け取ったlocation1location2を表示&ファイル書き込みを行いたいです。表示&書き込みのやり方は分かるんですが、データの渡し方がわかりません。

index.phpのlocation1location2をsend.phpへ渡す方法を教えて下さい。

index.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>位置取得</title>
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Geolocation Sample</title>
</head>
<body>
  <?php
    $data[0];
  ?>
<script type="text/javascript">

    if (navigator.geolocation) {
        // 現在の位置情報取得を実施
        navigator.geolocation.getCurrentPosition(
        // 位置情報取得成功時
        function (pos) { 
                var location ="<li>"+"緯度:" + pos.coords.latitude + "</li>";
                location += "<li>"+"経度:" + pos.coords.longitude + "</li>";
                document.getElementById("location").innerHTML = location;

        },
        // 位置情報取得失敗時
        function (pos) { 
                var location ="<li>位置情報が取得できませんでした。</li>";
                document.getElementById("location").innerHTML = location;
        });
    } else {
        window.alert("本ブラウザではGeolocationが使えません");
    }
</script>
    <ul id="location">
    </ul>

  </body>

send.php

<?php

        $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null;

    //  ログ・ファイルに追記下記モードでオープン
        $file = @fopen('5-37.log', 'ab') or die('ファイルを開けませんでした!');
        //  ファイルのロック
        flock($file, LOCK_EX);
        //  ファイルの書き込み
        fwrite($file, implode("\t", $url) ."\n");
        //  ロックの解除
        flock($file, LOCK_UN);
        //  ファイルを閉じる
        fclose($file);
        print 'アクセスログを記録しました。';
?>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/12/06 23:07

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

checkベストアンサー

+1

調べられているようでご存知かもしれませんが、
Ajaxってめんどくさいので、jQueryなんて使ってみては如何でしょうか?

とりあえず、index.phpの、ヘッダに

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

を追記し、
送信処理を行いたいJavaScriptのところに、

// send.phpにおくりたいデータをjSON形式で書く
var $map = {"location1": localtion1, "location2": location2};

//ajaxで読み出し
$.ajax({
    type: 'POST',
    url: './send.php',
    data: $map,
}).done(function(data){
    // ここに処理が完了したときのアクションを書く
    alert("送信完了!\nレスポンスデータ:" + data);
});

をかけばできそうな気もします。(コードみてませんが)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/08 00:01

    できる希望を持てた回答だったので、選ばせてもらいました。
    JavaScriptの勉強も必要ですね

    キャンセル

  • 2016/12/08 04:06

    ありがとうございます。
    完成することを祈っております

    キャンセル

+1

処理の順番について理解しましょう。

ユーザーがURLにアクセスする。

WEBサーバがPHPを処理してHTMLをブラウザに返す。

HTML内のJavaScriptをブラウザが解釈し実行する

通常このような処理の流れになりますから、JavaScript から PHP に値を渡すことはできません。
そのような処理をしたい場合は ajax (非同期通信処理)を行うことになります。

ユーザーがURLにアクセスする。

WEBサーバがPHPを処理してHTMLをブラウザに返す。

HTML内のJavaScriptをブラウザが解釈し実行する

JavaScript 内の ajax 処理を走らせ、非同期で PHP にアクセスする

PHPが処理し、結果をブラウザに返す

レスポンスをJavaScriptが受けて、結果に応じて処理する

という流れになります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/07 15:31

    「onLoad」というものを使えばいいですかね?
    http://phpjavascriptroom.com/?t=js&p=event#a_onload

    キャンセル

  • 2016/12/07 15:36

    試してみて、意図通り動く場合はOK.動かない場合はNG.

    キャンセル

  • 2016/12/07 15:39

    教えてもらったサイトのAjaxが理解できていないので、飛ばすことすらできません。もう少し時間が掛かりそうです。

    キャンセル

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

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

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