Javascriptの変数値をPHPに送信したい

scriptで取得したgeolocationの緯度経度をPHPで取得したい

グルメサーチAPIを用いて位置情報を取得し、近くのお店を一覧表示するWebアプリケーションを制作したい。
そのために、前段階としてgeolocationで緯度経度を取得して、その緯度経度の値をPHPで受け取れるようにしたい
＜現状＞
・緯度経度の取得はできた
・$.ajaxで緯度経度をPHPに送信できているのかが不明
・$.ajaxで送信したデータの受け取り方で悩んでいる
（ファイル名：u.php）
エラーメッセージ

u.php:78 Uncaught SyntaxError: Unexpected token '<'

該当のソースコード

<?php
  $lat;
  $lng;
  function get(){
    $lat = $_POST['data1'];
    $lng = $_POST['data2'];
    print $lat;
    print $lng;
  }
      
?>
<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ホットペッパーAPIテスト</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" herf="css/style.css">
        <script src="jstest/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            var lat=0;
            var lng=0;
                
        
            // Geolocation APIに対応している
    if (navigator.geolocation) {
      alert("この端末では位置情報が取得できます");
    // Geolocation APIに対応していない
    } else {
      alert("この端末では位置情報が取得できません");
    }
            
    // 現在地取得処理
    function getPosition() {
      // 現在地を取得
      navigator.geolocation.getCurrentPosition(
        // 取得成功した場合
        function(position) {
            lat = position.coords.latitude;
            lng = position.coords.longitude;
            alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
            
            $.ajax({
                    type: "POST", //　GETでも可
                    url: "http://localhost/test/u.php", //　送り先
                    data: {
                      'data1' : lat,
                      'data2' : lng
                      }, //　渡したいデータをオブジェクトで渡す
                    success: function(data){
                           alert(data);
                    }
                  })
            
            

            
        },
        // 取得失敗した場合
        function(error) {
          switch(error.code) {
            case 1: //PERMISSION_DENIED
              alert("位置情報の利用が許可されていません");
              break;
            case 2: //POSITION_UNAVAILABLE
              alert("現在位置が取得できませんでした");
              break;
            case 3: //TIMEOUT
              alert("タイムアウトになりました");
              break;
            default:
              alert("その他のエラー(エラーコード:"+error.code+")");
              break;
          }
        }
      );
    }
    
          </script>

    </head>
    <body>
    
    <input type="button" value="getPositon" onclick="getPosition();">
    <input type="button" value="get" onclick="<?php echo get(); ?>">

    </form>
    
    </body>
</html>

PHP、Javascriptはほぼ初心者ですので、プログラムも拙くて申し訳ありません。

m.ts10806

2021/04/29 06:38

u.phpとは。あと、getボタンを押すとPHPのget()が実行されると思ってませんか？

No.929

2021/04/29 06:41

u.phpはソースコードが書いてあるファイル名です。そう思っています。勘違いでしたら、どのようにしたら位置情報をPHPで取得できるのか教えていただけるとありがたいです。

kei344

2021/04/29 06:43

（質問文は編集できます）質問タグが「Java」になっているので、「JavaScript」に変更してください。

No.929

2021/04/29 09:09

ご指摘ありがとうございます。

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

回答1件

ベストアンサー

※コメントからあくまでu.phpが現在質問に提示されたコードであるという推測での回答です

同ファイルでAjaxのリクエスト受け口までするのは悪手です。
別にされたほうが良いです。
なぜなら「出力」を全てAjaxの呼び出し元に返すからです。
現状処理分けされてないのでHTMLも全て返されます。

処理分けを明確にできないのでしたら送信先は自身ではなくAjax用の受け口を作った方が良いでしょう。

そしてPHPに書かれたget()という関数はボタンクリック時には実行されません。
あくまでu.phpが実行されたときに実行されているはずです。

画面表示したときにブラウザの「ソースを表示」で確認してみてください。

php
1<input type="button" value="get" onclick="<?php echo get(); ?>">
2

のところは

php
1<input type="button" value="get" onclick="">
2

となっているはずです。
もしくは、$_POSTのundefined indexですかね。

画面表示に使われるREQUEST METHODは「GET」なので、POSTには何も入っていません。

ここまでが前提。

ここから「どうするか」

まず、質問に書かれていないところを確定してください。
「Ajaxでデータを受け取って何をしたいのか」
JavaScript側でgeolocationにて想定した値が出来ているのであれば、何のためにその値を使うのかと言う部分がないと意味がありません。

ここは他者が決めることではないので、決まっているもしくはこれから決めるということでこれくらいに留めます。

で次。

Ajax送信してリクエストを受け取る先を別に設けてください。
HTML出力がなく、データを受け取って処理をするだけのプログラムです。

・$.ajaxで緯度経度をPHPに送信できているのかが不明

「送信できているか」はデバッガを導入するか、受け取ったデータをファイル出力する等工夫が必要です。
バックグラウンドで実行されるものなので、画面上で確認する術はありません。
「出力を全てレスポンスとする」という特性から、現状のようにとりあえずsuccessで返ってきたdataをJavaScriptのalert()なりconsole.log()なりで確認する手もありますが、それはあくまで一時的な対応なので、やはりデバッグの仕組みは入れた方が良いです。

・$.ajaxで送信したデータの受け取り方で悩んでいる

POSTで送信したなら$_POSTで、GETで送信したなら$_GETで
これは通常のform送信と同じです。リクエストはリクエストですから。

あとは「受け取って何したいのか」によって処理もレスポンスも違ってきます。

投稿2021/04/29 07:02

m.ts10806

総合スコア80850

No.929

2021/04/29 07:28

新しくjsファイルを作り位置情報の取得もそちらで行い、Ajaxもjsのファイルで行うよう改善してみます。getボタンについての指摘理解できました。「Ajaxで受け取って何がしたいか」といいますと、現在グルメサーチAPIを用いで現在地から半径を設定し、範囲内のお店を一覧表示するものを作りたいです。そのためPHPで緯度経度を扱えるようにしたいと考えています。説明がおソロ化になっていて申し訳ありません。

m.ts10806

2021/04/29 07:43

いえ。jsではなくphpです。あくまでリクエストはサーバーに対して送信するので受け取れるのはphpです。

No.929

2021/04/29 09:28

ｐｈｐのファイルで<script>を使っていたところをすべて新しいjsファイルに書き直しました。受け取る用のＰＨＰファイルもhtmlの入っていない新しいものに書き換えました。ですが、新しく作ったphpのほうでエラーが出ました。そちらを新しく質問として投稿しましたので、そちらを見て回答いただけると助かります。ぜひよろしくお願いします。

m.ts10806

2021/04/29 09:38

jsを新しく必要は一切ないのですけど、意図伝わってないのでしょうか・・・

m.ts10806

2021/04/29 09:38

要件同じなので新たに質問立てる必要もないように思いますが・・

No.929

2021/04/29 09:47

jsを新しくしたのはこちらの都合です。ですが理由はわかりませんが、新しくjsを作ったらdataに緯度経度がしっかり入っていることがalertで確認することができました。新しく質問を立てた件ですが、getのボタンでdataを受け取れると勘違いしていたので、自分なりに調べて、受け取るところのプログラムを変更しました。なので、新しく質問を立てた方がわかりやすいと思ったので、このように致しました。面倒をおかけしてすみません。

m.ts10806

2021/04/29 09:50

同件で解決してないのでしたらむしろ分かりにくくなります。状況追記して続けるべきかと。対応内容からするとあまり回答理解されてないようですし・・。

No.929

2021/04/29 10:01

考えが及ばす申し訳ございません。 scriptの部分は解決できたと思います。なので、今はデータを受け取るにはどのようなプログラムを書けばいいのかわからず詰まっています。ですのでそのプログラムの部分を教えていただけるとありがたいです。

m.ts10806

2021/04/29 10:47

私はscriptの問題には言及していません。・Ajaxはバックグラウンドで実行されていて画面（この場合はブラウザ）で確認するのではなくデバッガやログファイルにて確認すること・受け取ってどうしたいか何をしたいのかを組む前にきちんと決めることです。受け取ることだけが目的ってありませんから。それ次第ではAjaxという選択肢が良いかどうかも変わってきます。 Ajaxの検証をしたいだけならここまでJavaScript組む必要はありません。いずれにしてもデバッガ含めたデバッグ環境を整えるのは必須です。

No.929

2021/04/29 11:25

表示させようとしているのが間違いだということ理解しました。確認をしたいのなら、環境を整えること必須ということもわかりました。理解が悪くすみません。現在は、データを受け取る方法がわからない状態です。グルメサーチAPIというものを使って、近くのお店を表示するWebアプリケーションを作ろうとしています。近くの店を検索する際に、位置情報（緯度経度）が必要になるのでjsでGeolocationを用いて、緯度経度を取得します。APIのプログラミングはPHPで行うため、緯度経度の数値をPHPに渡したい、PHPで受け取りたいというのが目的です。

m.ts10806

2021/04/29 11:41

POSTで送信したら$_POSTで取れますし、GETで送信したら$_GETで取れます。 https://api.jquery.com/jquery.ajax/ それはmethod オプションにより決まります。レスポンス（つまり呼び出し元が受け取るタイプ）はdataTypeで設定します。 >グルメサーチAPI 下記でしょうか。 https://webservice.recruit.co.jp/doc/hotpepper/reference.html このAPIで情報受け取るだけならJavaScriptで済むと思います。結局はAjaxもWebAPIと概念は同じです。リクエストURLに必要なパラメータをGETまたはPOST（そこは受け取った先での処理次第）で送信し、必要な結果を出力として返します。なので、「バックグラウンド」呼び出し元は中で何をしているか知らなくても必要な情報を送ればそれにそった情報を返してくれるということですね。

No.929

2021/04/29 11:53

ありがとうございます。とても勉強になりました。私の考えが前提からおかしかったことなどわかりました。完璧に理解ができたわけではありませんが、とっかかりができたので自分んで考えてみようと思います。今回は本当にお世話になりました。ありがとうございました。

m.ts10806

2021/04/29 12:02

ヒントになったようで何よりです。調べるにしても方向性が違ってれば進みませんしね。

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