【PHP入門】JavaScriptからPHPにデータを渡す方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptからPHPにデータを渡す方法を見ていきます。

前回は、PHPからJavaScriptにデータを渡す方法について解説しました。

こちらも気になる方は、ぜひCheckしてみてください。

【PHP入門】PHPファイル内でPHPからJavaScriptにデータを渡す方法

【 PHPからJavaScriptにデータを渡す方法】

1 JavaScript側(Client-Side)からPHP側(Server-Side)にデータを送信する
- 1.1 JavaScript側(Client)は、fetch-APIを使用してデータを送信する(HTTP-Request送信)
- 1.2 PHP側(Server)は、処理などをしてClientにResponseを返す
2 Sample-Code全文
3 Twitterやってます！Follow Me！
4 PHP / Laravel書籍
5 参考・引用
6 最近の投稿

JavaScript側(Client-Side)からPHP側(Server-Side)にデータを送信する

PHPと言うServer-Sideの言語とJavaScriptと言うClient-Sideの言語の別言語のデータのやり取りなので、それぞれにデータをやり取りするための処理が必要になってきます。

JavaScript側(Client)は、fetch-APIを使用してデータを送信する(HTTP-Request送信)

JavaScript側では、fetch-APIなどの通信機能を利用してServer-SideであるPHPにデータを渡します。

fetch-APIでは第1引数に送信先のPath、第2引数にHTTP-Request送信のための情報を詰め込んだObjectをセットします。

JSONでやり取りをするため、headers: { ‘Content-Type’: ‘application/json’ } にしたり、

送信するデータを JSON.stringify(parameter) としているのがポイントです。

<script>

    // 1. PHP(Server-Side)に渡したいデータ
    const parameter = {
        name:  'ロボ・ロボ玉',
        address: '神聖グンマー帝国🔥',
        telephone: '090-1212-1212',
    };

    // 2. fetch-APIを使用して、Server-Sideにデータを送信する
    // => fetch(送り先, HTTP通信の情報)
    fetch('server.php', 
        {
            method: 'POST', // HTTP-メソッドを指定
            headers: { 'Content-Type': 'application/json' }, // jsonを指定
            body: JSON.stringify(parameter),
        }
    ) // Serverから返ってきたレスポンスをjsonで受け取って、次のthenに渡す
    .then(response => response.json())
    .then(res => {
        // 最終的に返ってきたデータ => Server-Sideでのデータ処理が行われている！
        console.log({res});
            // res:
                // address: "神聖グンマー帝国🔥"
                // like_food: "ひまわりの種"
                // name: "ロボ玉🔥"
                // robotama_flag: true
                // telephone: "090-1212-1212"
    })
    .catch(error => {
        // エラー発生の場合の catch & console出力
        console.log({error});
    });
    
</script>

PHP側(Server)は、処理などをしてClientにResponseを返す

PHP側では、JavaScript側(Client-Side)から送られてきたデータを受け取る準備をする必要があります。

「 file_get_contents(‘php://input’); 」でPOSTされた生のデータを受け取ることができます。

最終的にJavaScript(Client-Side)にResponseを返すときは、echo と json_encode() を使って処理結果を返します。

<?php

// [ server.php ] 

// 1. POSTされた生のデータを受け取る
$request_raw_data = file_get_contents('php://input');

// 2. JSON形式のデータをデコードする
// => データをPHP上で処理できるような形にする。
$data = json_decode($request_raw_data);

// 3. データをPHP(Server-Side)上で処理する！

// key指定でvalueのUpdate
$data->name = 'ロボ玉🔥';

// key & valueの追加
$data->robotama_flag = true;
$data->like_food = 'ひまわりの種';

$response = $data;

// 4. echo するとClient-Sideにデータを返却することができる！
// => JSON形式にして返す
echo json_encode($response);

Sample-Code全文

// [ client.php ]

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptからPHPにデータ送信🔥</title>
</head>
<body>
    
<h1>JavaScriptからPHPにデータを渡す方法をTestするロボ玉🔥</h1>

<h2>JavaScript側(Client-Side)からPHP側(Server-Side)にデータを送信する🔥</h2>

<h3>1. fetch-APIを使用して、Server-Sideにデータを送信する(HTTP-Request送信)</h3>

<h3>2. Server-Sideは、処理などをしてClientにResponseを返す</h3>

<h3>参考・引用</h3>
<a href="https://brainlog.jp/programming/post-538/" target="_blank" >PHPとJavaScriptの間で変数の値をやり取りする方法</a>

<script>

    // 1. PHP(Server-Side)に渡したいデータ
    const parameter = {
        name:  'ロボ・ロボ玉',
        address: '神聖グンマー帝国🔥',
        telephone: '090-1212-1212',
    };

    // 2. fetch-APIを使用して、Server-Sideにデータを送信する
    // => fetch(送り先, HTTP通信の情報)
    fetch('server.php', 
        {
            method: 'POST', // HTTP-メソッドを指定
            headers: { 'Content-Type': 'application/json' }, // jsonを指定
            body: JSON.stringify(parameter),
        }
    ) // Serverから返ってきたレスポンスをjsonで受け取って、次のthenに渡す
    .then(response => response.json())
    .then(res => {
        // 最終的に返ってきたデータ => Server-Sideでのデータ処理が行われている！
        console.log({res});
            // res:
                // address: "神聖グンマー帝国🔥"
                // like_food: "ひまわりの種"
                // name: "ロボ玉🔥"
                // robotama_flag: true
                // telephone: "090-1212-1212"
    })
    .catch(error => {
        // エラー発生の場合の catch & console出力
        console.log({error});
    });
    
</script>
</body>
</html>

<?php

// [ server.php ] 

// 1. POSTされた生のデータを受け取る
$request_raw_data = file_get_contents('php://input');

// 2. JSON形式のデータをデコードする
// => データをPHP上で処理できるような形にする。
$data = json_decode($request_raw_data);

// 3. データをPHP(Server-Side)上で処理する！

// key指定でvalueのUpdate
$data->name = 'ロボ玉🔥';

// key & valueの追加
$data->robotama_flag = true;
$data->like_food = 'ひまわりの種';

$response = $data;

// 4. echo するとClient-Sideにデータを返却することができる！
// => JSON形式にして返す
echo json_encode($response);