JavaScriptのFetchでPHPから変数を取得したいです。

Question

JavaScriptのFetch APIでphpにPOSTする方法は見つけて無事動作しました。
とりあえずPOSTをGETに変えてみたのですが、phpから何も取得出来ませんでした。
JavaScriptのFetchでPHPの変数($data)を取得するにはどうすればよいですか？
Fetch APIでPHPにデータを送信する
PHPにJavaScriptから値(999)をPOSTするコード------------------

    let postData = new FormData;
    postData.set('num',999);
    const data = {
        method: 'POST',
        body: postData
    };
    fetch('phpファイルのパス',data)

    $data = $_POST['num'];
    //その後は$dataをredisというdbにkey01として渡し、redis上で999が渡されたことを確認しました。
    $redis = new Redis();
    $redis->connect("127.0.0.1",6379);
    $redis->set('key01',$data);
    $test = $redis->get('key01');
    print $test;

---

試したphpからFetchで変数をGETするコード
以下のサイトを参考にしたのですが、jsonをGETする方法しかなかったのでPHPの変数($data)をGETする方法はわかりませんでした。
JavascriptによるHTTPリクエスト
下のjavascriptを.htmlにjavascript要素で書き込んで実行したのですが、何も表示されませんでした。

    fetch('phpファイルのパス', {
    method: "GET",
    mode: "cors"
  })
  .then(response => {
    if (response.ok) {
      return response.text();
    }
    // 404 や 500 ステータスならここに到達する
    throw new Error('Network response was not ok.');
  })
  .catch(error => {
    // ネットワークエラーの場合はここに到達する
    console.error(error);
  })

    $data = $_POST['num'];

回答よろしくお願いします！

Answer 1

Fetchでもなんでもですけど、PHPの変数をそのまま利用するわけではなく、PHPから返却された文字列をJavaScriptで利用することになるので、「変数を取得したい」という考え方は間違ってます。
printなりechoなりで出力した内容が返ってきますので、PHPで変数作っても返ってくるのは展開された内容です。
なので参考された先も「JSON”文字列”」であるはずです。
JSONのほうが扱いやすいからだと思います。

Comments

[9nahito]

回答ありがとうございます！やってみます。

[9nahito]

ここに記入していたコードは回答として投稿させてもらいました。
ありがとうございました！

[m.ts10806]

コメント欄では目につきにくいですしマークダウンが使えません。
自身で回答として投稿されたほうが良いと思います。

Answer 2

回答ありがとうございます！
FetchAPIのPOSTでphpに送ったjavascriptの変数の値xをredis(db)に送り、phpでredisから取得したxの値をjsonに書き込みました。
最後にFetchAPIのGETでjsonからxの値をJavaScriptに取り込みました。console.log(getX)で最初にPOSTした変数の値xを取得できたことが確認できました。
下のコードはcssで描画した四角をキーの(a,d)で左右に動かせて動かした四角の座標が
console.log()で表示されるようにしました。
私はまだサーバーサイドは初心者なのでサーバーサイドがどのような仕組みかを学ぶためにこのようなことをしました。

<div id="id0" style="background-color:grey;color:snow;display:inline-block;position:absolute;">
</div>
<script>
var player = document.getElementById("id0")
var ww = window.innerWidth
var wh = window.innerHeight
player.style.width = ww*0.1
player.style.height = ww*0.1
var x = 0
var y = 0
var speed = 12
var getX = 0
var path = 'http://localhost/pfetch/test.php'
function get(){
    fetch('http://localhost/pfetch/test2.json', {
    method: "GET",
    mode: "cors"
  })
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    // 404 や 500 ステータスならここに到達する
    throw new Error('Network response was not ok.');
  })
  .then(resJson => {
    console.log(JSON.stringify(resJson));
  })
  .catch(error => {
    // ネットワークエラーの場合はここに到達する
    console.error(error);
  })
}
function update(){
    console.log(getX)
    get();
    setTimeout(update,200);
}update();
document.addEventListener("keydown",function(event){
    let postData = new FormData;
    //NoSqlデータベースのredisにブラウザで入力したデータを送信する！！
    if(event.keyCode == 68){
        x+=speed
    }else if(event.keyCode == 65){
        x-=speed
    }
    player.style.left = x;
    postData.set('num',x);
    const data = {
        method: 'POST',
        body: postData
    };
    fetch('http://localhost/pfetch/test.php',data)
        //.then((res)=>res.text())
        //.then(console.log)
});
</script>

<?php
    // エラーを出力する
    ini_set('display_errors', "On");
    $data = $_POST['num'];
    $redis = new Redis();
    $redis->connect("127.0.0.1",6379);
    $redis->set('key01',$data);
    $test = $redis->get('key01');
    $obj = $test;
    $data = json_decode($obj,true);
    $json = fopen("jsonファイルパス", 'w+b');
    fwrite($json, json_encode($data));
    fclose($json);
?>