javascriptの値をPHPで使用したい

Question

前提・実現したいこと

localstorageから取得したデータをdocument.writeで表示し、
その値をphpに値を送信し、表示したいです。

発生している問題・エラーメッセージ

Ajaxを使用して実装したいのですが、理解できなくてとりあえずhtmlで表示できないかと
試みているのですが、それもできていない状況です。
エラーはなく「document.write(number);」の部分だけ表示されています。

該当のソースコード

addEventListener('load', function() {
        var datas = localStorage.getItem("datas");
        if (datas) {
          var obj = JSON.parse(datas);
          var number = JSON.parse(localStorage.getItem("datas")).data0;
          document.write(number);
          document.getElementById("number").innerHTML = number;
        }
    }, false);

<input type="text" id="number">

試したこと

ソースコードに記載したコマンドを色々サイトを見て編集したくらいです。

補足情報（FW/ツールのバージョンなど）

EC2上,localstrage使用

Comments

[int32_t]

本当にPHP(サーバ)コードに渡したいのならXHRやfetchでできますが、なぜPHPに渡したいのでしょうか。どこに「表示したい」のでしょうか。

[kuyan]

PHPに渡してデータベースを動かしたいです。
localstorageを使うことによってUPDATEのWHERE部分に入力することなく、自動でデータベースをたたけるようなシステムを作成しています。
データの流れとしてはセンサ→EC2→RDSの構成になっています。
SQL文などに関しては出来るのでlocalstorageの値をPHPで使用できるようにしたいといった感じです。
説明わかりにくくて申し訳ないです。

[int32_t]

データベース操作の結果をどこに表示したいのですか? このJavaScriptコードが動いているページですか?

[kuyan]

データベースにセンサーから得た情報をUPDATEするためのPHPとして作成しようと考えています。
また、このPHPを開かなくてもlocalstorageに値が固定されているので自動でUPDATEできるのではないかと思い、localstorageの値をPHP(UPDATE文)に送るのを試みています。

[kuyan]

データベースの結果は別のページで表示できるように作ってあるのでUPDATEのみのページです。

[int32_t]

なるほどです。状況が理解できました。

Answer 1

document.write()を使ってはいけません。

クライアント側は以下のような感じでしょう。PHP側に合わせてmethodやbodyの内容は調整する必要があります。

// 変数numberの値をサーバに送る
let formData = new FormData();
formData.append('data0', number);
fetch('PHPで作ったUPDATEするコードのURL', {
  method: 'POST' や 'GET',
  body: formData
});

Comments

[kuyan]

<?php
$formData = $POST["formData"];
echo $formData;
?>
PHP側でecho表示するためにはどのようなコマンド使用したらよいのでしょうか?
色々聞いてしまい申し訳ないです。

[int32_t]

この場合、PHPのコードでechoしたデータはfetch()を呼んだクライアントに返りますが、クライアント側で結果を受け取ってないのでどこにも表示されません。

クライアント側で結果を受け取って何か表示するようにするか、PHP側で error_log() か何かでサーバ側に記録しておくといいかと思います。

[kuyan]

クライアント側で受け取るというのはPOSTで受け取るのとは違う感じでしょうか？
PHP側でPOST受け取りするのはdata0の変数でしょうか？

[kuyan]

$formData = $POST["formData"];
$data0 = $_POST['data0'];
echo error_log($data0);
echo error_log($formData);
error_log() で見たときdata0=1,formData=1でした。
実際は2345が出力されるはずなのですが出来てきませんでした。

var number = JSON.parse(localStorage.getItem("datas")).data0;
let formData = new FormData();
formData.append('data0', number);
fetch('test.php', {
method: 'POST',
body: formData
});
がjsのコードになっています。よろしくお願い致します。

[int32_t]

PHPの変数 $formData は不要です。「echo error_log(...)」という使い方はおかしいです。

[kuyan]

すいません。色々分かっていなくて。。