JavaScriptとPHPを連携したい(DBから取ってきたデータをJavaScriptで用いたい)

※ 現在ローカル環境にXAMPPを用いて開発しています。

JavaScript + PHP でWebアプリを作っているのですが、
JavaScript側からPHPの関数を呼び出す方法はありますか?

概要としては、

[概要フロー]
1. index.php で PHP側でDBに接続し、データを取ってきてセッションにセットする
2. ユーザが次のページに入ると
    2.1. テーブル状のデータ列(イメージとしてはECサイトの在庫管理の部分)が表示される
    2.2. この(2.1)のselect(コンボボックス)のデータの在庫を2から1に変更する等のような変更を加えると
        2.2.1. (1)で設定されていたセッションのデータも変更する
    2.3. (このページが閉じられるまで同じ処理を繰り返す

のような感じです。

(2.2)の「selectのデータが変更された」イベントはPHPではできないようで、JavaScript側でonchange="JavaScriptの関数" を設定して呼び出しています。
ですが、この(2.2.1)の部分、つまり「セッションのデータも変更する」の部分をどのように実装すべきか悩んでいます。

全体的な構造をPHP側でデータを制御するのではなくJavaScript側のデータとしてjsonとかのようなデータとしてやる方法もあるようですが、
その方法だとデータが丸見えなのであまり好ましくありません。
(今回の処理だとそこまで問題はなさそうな気がしますが、念のため…)

データそのものは、上記のように「ECサイトでの在庫管理」のような、「在庫の数」とかみたいなやつです。(方向性としては)

以下はそのアプリに組み込むかどうかを検討するために作った軽いサンプルです。

とりあえず、「JavaScript PHP 呼び出し」等で調べてみるとjQueryのAjaxを使うらしいので試してみました。
ですが、私のやり方が間違っているのか、なぜかPHP側の関数が呼び出されません。

以下、軽いサンプルです。(実際に作りたいものとは違います…)

<!-- index.php -->
<!DOCTYPE html>
<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">
    <?php
        session_start();
    ?>
</head>
<body>
    <?php
    if( !isset( $_SESSION[ 'session1' ] ) ){
        $_SESSION[ 'session1' ] = "CLang";
    }

    echo $_SESSION[ 'session1' ]."<br />";
    ?>


    <form action="page1.php" method="post">
        <p><button name="gobutton">Go</button></p>
    </form>
</body>
</html>

<!-- page1.php -->
<!DOCTYPE html>
<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>Calling PHP from JavaScript</title>
    <?php
        session_start();
    ?>
</head>
<body>
    <script src="./jquery-3.6.0.min.js"></script>
    <script>
        function SelectChanged( ctrlId ){
            var slct = document.getElementById( ctrlId );
            alert( slct.value );

            jQuery.ajax({
                type: "post",
                url: "http://localhost/samples/calling_php_from_javascript/page2.php",
                data: { "func" : "func2", "argument" : ctrId },
            });
        }
    </script>
    <form>
        <select name="select1" id="select1" size="1" onchange="SelectChanged('select1')">
            <option value="C#">C#</option>
            <option value="C++">C++</option>
            <option value="PHP" selected>PHP</option>
        </select>
    </form>
</body>
</html>

// page2.php
<?php
    // セッション開始
    session_start();

    function func2( $id ){
        if( !isset( $_SESSION[ 'session1' ] ) ){
            echo "error2";
        }
        echo "<p>ok!</p>";
    return 0;
    }

    $func = $_POST[ 'func' ];
    $argument = $_POST[ 'argument' ];
    $func( $argument );
?>

同じディレクトリ内にjQueryがあるとします。
(apacheを起動してPHPが使える状態にした後に)このファイル群のindex.phpを開き、
ボタンを押してpage1.phpに進みます。
そして出てきたselectのアイテムを選択すると、私の考えでは

1. 選択されたアイテムがalertで表示される
2. page2.phpのfunc2関数が呼び出されて少なくともecho "<p>ok!</p>";が処理される

となるはずですが、実際には(1)は行われて(2)は行われている様子が見当たりません…

これ以外の方法でもいいのですが、「selectのアイテムが選択されたときに、セッション内のデータを変更したい」のです。
上記サンプルではselectのoptionタグで表示しているデータは完全固定ですが、実際にはDBから取ってきたデータを用いるつもりです。

どのような方法でやるべきなのでしょうか。

[情報]
言語: PHP, JavaScript(jQueryあり)
jQuery: jQuery-3.6.0.min.js
XAMPP: XAMPP Version 8.1.6
OS: Windows 10

ーーー

修正になりますが、やりたい処理は単にDBから一方通行一方通行で用いるのではなく用いるのではなく、双方向で用います。

上記で言えば「スペイン語、英語」等の選択肢と「現在選択されているデータ」はそれぞれ違うテーブルに記述されていて、両方使います。

つまり、スペイン語等の選択肢をselectに設定し、現在選択されているデータもとってきてselectedを付与。
そして「現在選択されているデータ」が変更されたらPHPなりを介してDB内の内のデータも修正する…といったことがしたいのです。
(紛らわしくてすみません……)

行動規範の内容に同意します

回答2件

ベストアンサー

【PHP】Ajaxを使ってJSON形式で配列データを取得し、Webページ上に表示させる最低限の方法 - Qiita
fetch API編をなぞると良いのではないかと。

投稿2022/06/27 09:41

退会済みユーザー

総合スコア0

BeatStar

2022/06/30 05:06

ご回答ありがとうございます。一応提示して頂いたサイトのサンプルを軽く扱ってみたところ、私がやりたかったことに大体一致するようなのでこの方法を選ばせて頂きます。

行動規範の内容に同意します

PHPでAPIを用意しjsからfetchで要求をなげ、PHPで参照後にjsonを戻し、jsで反映させてください
参照権限・更新権限などは接続ユーザーをログイン方式にしておきセッションに保持したユーザー情報をもとに
mysql側のユーザーを切り替えるか、ユーザーマスターから参照・更新の可否を判断するのが妥当です

投稿2022/06/27 09:16

編集2022/06/27 09:19