JavaScriptの変数の値をPHPに受け渡す方法とは【メンターが回答】

「JavaScriptの変数の値をPHPに受け渡す方法とは【メンターが回答】」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。jQueryを使った書き方をぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptの変数の値をPHPへ渡す方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

index.php(内のJavascript)でlocation1とlocation2の値を取得し、send.phpで受け取ったlocation1とlocation2を表示、ファイル書き込みを行いたいです。

表示や書き込みのやり方は分かるのですが、データの渡し方がわかりません。

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

 

該当のソースコード

index.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>位置取得</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>
</html>

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 'アクセスログを記録しました。';
?>

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

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);
});

以上、JavaScriptの変数の値をPHPへ渡す方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

田島悠介

JavaScriptの変数の値をPHPへ渡す方法について解説したよ。

大石ゆかり

JavaScriptの値をPHPへ送れるんですか?

田島悠介

そうそう。Ajaxという方法を使ってPHPファイルへ送信して結果を受け取ることが出来るんだよ。

大石ゆかり

わかりました。ありがとうございます!

他にもJavaScriptでグローバル変数を取得する方法についてメンターが回答しているので、合わせてご覧ください。

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。