PHPとJavaScriptの間で変数の値をやり取りする方法

はじめに

PHPはサーバサイドプログラム、JavaScriptはクライアントサイドプログラムという構造上、PHPからJavaScriptへの渡し方は簡単ですが、JavaScriptからPHPへ渡す場合は、JavaScriptとPHPの関係を理解しないと難しいかもしれません。

PHP→JavaScript

PHPの変数をJavaScriptに渡す方法は簡単で、一旦、JSON形式に変換することで可能です。

<?php
$param = array(
    "名前" => "山田太郎",
    "住所" => "不定",
    "電話番号" => "090xxxxxxxx"
);
$param_json = json_encode($param); //JSONエンコード
?>

<script>
    var param = JSON.parse('<?php echo $param_json; ?>'); //JSONデコード
    console.log(param);
</script>

JavaScript→PHP

逆にJavaScriptの変数をPHPに渡す場合は、クライアント（ブラウザ）側からサーバへデータを送らなければいけません。

とは言っても、それ用の方法があるので、それを使ってやってみましょう。

JavaScript側

const param = {
    name: '山田太郎',
    address: '不定',
    tel: '090xxxxxxxx'
};

fetch('request.php', { // 第1引数に送り先
        method: 'POST', // メソッド指定
        headers: { 'Content-Type': 'application/json' }, // jsonを指定
        body: JSON.stringify(param) // json形式に変換して添付
    })
    .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す
    .then(res => {
        console.log(res); // 返ってきたデータ
    });

サーバ（PHP）側

request.php

<?php
$raw = file_get_contents('php://input'); // POSTされた生のデータを受け取る
$data = json_decode($raw); // json形式をphp変数に変換

$res = $data; // やりたい処理

// echoすると返せる
echo json_encode($res); // json形式にして返す

上記のように、サーバへ送るだけではなく、サーバ側で処理した結果を返すことができます。

まとめ

JavaScriptとPHPはペアで使う事が多いので、どうしても変数のやりとりが必要になる事が多いですね。

それぞれのプログラムがどこで動いているのか、ブラウザで見ているページはどういう経路を経て表示されているのかを理解してプログラミングするとうまく変数を扱えるようになると思います。

JavaScript→PHPの方法では、Fetchというものを使ってデータをサーバに送っています。Fetchの詳しい使い方は以下の記事をご覧ください。

Fetchの使い方

【Javascript】Fetchを使ってサーバ（PHP）とデータのやり取りをする

Ajaxの使い方

【Javascript】$.ajaxを使ってサーバ（PHP）にデータを渡す方法