JSの配列データをPHPに渡して利用したい

Question

JSの配列データをPHPに渡したいと考えております。

下記のようなJSの配列データがありこちらをPHPに受け渡し、１つづつPHPのforeachで取り出したいと考えております。

key = ["110", "111", "112", "113", "114"];

// JS側ではconsole.log(key[0])で110が取れていることは確認済みです

PHP側での取り出しに際し、いろいろ試したのですが現状でまだうまく取得ができておりません。

<?php
$script = '['.'<script>document.write(key);</script>'.']';

    foreach ($script as $value){
        echo $value. '<br/>';  // 値を取り出せない
    }
    ?>

知りたいこと
・JSの配列データをPHPで使用する方法を教えて頂きたいです
・このケースの場合、PHP側でjson_decodeはする必要はありますでしょうか

// echo $scriptの結果
[110,111,112,113,114]

Comments

[m.ts10806]

なぜそうしたいのか、大目的は何なのか書かれないと的確なアドバイスにはならないと思います。
本当にJavaScript,PHPは両方必要なのか？とか、要件もっと詰める必要があると思います。

[tarow]

ご指摘ありがとうございます。
現在の現状の環境をもう少し説明させてください。

環境説明
①WordPressで作られたサイト上に複数の投稿データがある
②複数の投稿データに対してAJAXを使った絞り込み検索をする為、一度WordPressの投稿データをREST APIからJSON形式で取得
③投稿の一覧を表示＆絞り込み検索による一覧のフィルタリング
④各投稿の一覧にはお気に入りボタンがついており、ボタンを押すとその投稿データのpost IDをLocal storageに保存ができる
⑤その後、お気に入りページにアクセスし、④で保存をした投稿データを閲覧できる

やりたかったこと
上記の⑤の箇所になり、今回Local storageで保存をしたpost ID情報をPHP(wordpress)に渡し、
post IDから保存した投稿データのリストを表示させたかった

勘違いをしていたこと
・Local storageに保存してあるpost IDから投稿データを取得するには、
　サーバーにデータを送信しリクエストとして投稿データを送ってもらう必要があるがその処理が抜けていた

上記を踏まえ対応しようと思っていること

案１：④でLocal storageに保存をする際、post ID意外に必要な情報を取得し、⑤ではJSでの処理で完結させる

案２：通常、お気に入りページに移動する為のリンクはホームページのメニュの中にあるが、そのボタンの要素に
　　　常にLocal storage内のデータをセットしておき、ユーザーがクリックしたタイミングでgetでサーバーに送信する

案３：お気に入りページ内で、XMLHttpRequest()を使用して、サーバー側にLocal storage内のデータを送りリクエストをもらう
　　　（この考えはできそうでしょうか。）

宜しくお願い致します。

[m.ts10806]

質問は編集できます。
要件にもなる部分ですし、質問本文に記載願います。

[m.ts10806]

>WordPressで作られたサイト上に
タグに追加必要に思います。

Answer 1

質問の意図を聞き出したいため、かんたんな図を起こしました。

どこのフェーズの話をしているのでしょうか。
この図は、上から下の方に向かって時間が推移していく中で、
どこでどんな処理をしているのかを表したものですが。

Comments

[tarow]

とてもイメージしやすいフロー図までご用意頂きありがとうございます。

私の質問がどの段階での処理かはm.ts10806さんへの回答として記載をしましたが、
私の間違いとしては、フロー図の右側から2番目の箇所から、PHPにリクエストを出さずにPHPからのリクエストを待っていたような勘違いだと思います。

Answer 2

<?php

$script = '['.'<script>document.write(key);</script>'.']';

まったく見当違いのことをやっていると思います。
その方法ではjsからphpには絶対にデータは渡せません

Comments

[yambejp]

jsが実行されるときにはもうphpの処理は終わっていますので
「渡す」の意図がわかりません。
あえて言えばphpでapi組んでajaxで渡して戻り値を
jsで展開するとかでしょうか・・・

[tarow]

ご回答を頂きありがとうございます。

それはPHPはサーバサイドだからということだからでしょうか。
もう少し教えていただけるとありがたいです。

実は、このデータはLocal Storageにデータが格納されているのですがこちらのデータをPHPでは取り出せないのでしょうか。

[yambejp]

せめてクッキーならサーバー＝ブラウザ間でやり取りがあります
例えばgetで渡してはだめなんでしょうか？

[tarow]

ご回答を頂き誠にありがとうございます。

今回、WEBサイトにお気に入りページの登録機能の実装を考えており、クッキーよりLocal storageの方が良さそうだったので使うことにしました。
お気に入りページへはサイト内でページ迂回をした後に行く可能性があるのですが、その場合でもgetでどこかにデータを送信できるのでしょうか。
PHPへの受け渡しが難しいようであればクッキーを検討してみようと思います。

[yambejp]

> getでどこかにデータを送信

結局apiを自分でつくっておいて、ajaxで渡します
でも渡したからと言って、php側のforeachで回すのはおかしな話で
普通にlocalStorageのデータなら、そのデータをjsで処理すればいいという話です

[tarow]

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

Local storageのデータですが、こちらはwordpressのpost IDを保存しており、foreachで使うことができると、post IDの紐付けから対応する投稿データや画像データなどが取得できる仕組みで考えておりました。

Local storageにデータを登録する時点で、post ID以外の情報を一緒に保存すればいいかとも考えましたが、複数の情報をpost IDごとに保存する方法がわからず今回の方法を検討することにしました。

[yambejp]

所定の箇所に配列のデータを表示するだけならこれでよくないですか？
<script>
window.addEventListener('DOMContentLoaded', ()=>{
key = ["110", "111", "112", "113", "114"];
var v=document.querySelector('#view');
key.forEach(x=>{
v.appendChild(document.createTextNode(x));
v.appendChild(document.createElement("br"));
});
});
</script>
<div id="view"></div>

[tarow]

ご指摘をいただきありがとうございます。

すみません、Local storageに保存をした値をJSで取り出していくことは現状でできているのですが、
Local storageに保存する際に、valueの値として1回のクリックで複数の値を格納し、お気に入りページ内でデータをJSで取りだすみたいなこともできるでしょうか。

尚、下記は現状で使用しているデータとHTMLタグの参考となります。

Jsonデータ
product = [
{
id: 101;
url: http://サイトのURL
img: http://画像ファイルのpath
title: ‘こんにちは’;
},
{
id: 102;
url: http://サイトのURL
img: http://画像ファイルのpath
title: ‘こんにちは’;
},
…..
]

HTML
<input type=“button” v-bind:value="[product.id]" class="heart">　 // value= 101

<input type=“button” v-bind:value="[product.id]" class="heart"> // value= 102

// 可能であればvalue値にJson内の1グループ（id、url、img、title）単位で保存をしたいです。
…