[PHP]JavaScriptとの連携 – パソコン・スマホの覚え書き

このサンプルプログラムは「JavaScriptからPHP(楽天市場で探す・ amazonで探す)を呼び出す方法を現役エンジニアが解説【初心者向け】」を参考にさせて頂きました。この場ですが謝辞を述べさせて頂きます。

※動作確認はしておりますが、参考にされる場合は自己責任でお願いします。

処理の流れ

1.メインプログラム内のリストボックスで番号を選ぶ。

2. 検索ボタンをクリックすると、選んだ番号が送信されサブプログラムが実行される。

3. メインプログラムのテーブルにその結果を表示する。

実行のイメージ画像

※このサンプルでは実際のリストボックスは１つです。

説明

1.メインプログラム「js-test.php」のソース

メインプログラムで選んだ番号をサブプログラムへ送信します。

<HTML>
<title></title>
<body>
<div align="center">
<form method="GET" name="f_main">
<select size="1" name="c_no">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<script>
<!--
function c_seek(){

var w_url = './js-test-data.php?str=' + document.f_main.c_no.value;

var request = new XMLHttpRequest();
request.open('GET', w_url, true);
request.responseType = 'json';

request.addEventListener('load', function (response) {
var data = <?="this.response"?>;
document.getElementById("no").innerHTML = data.no;
document.getElementById("country").innerHTML = data.country;
});

request.send();
}
//-->
</script>
<input type="button" value="検索" onclick="c_seek()">
</form>
<table border="1">
<tr><td>No.</td><td id="no">-</td></tr>
<tr><td>国名</td><td id="country">-</div></tr>
</table>
<br>
</div>
</body>
</HTML>

2.サブプログラム「js-test-data.php」のソース

送信されたデータを取得し、switch文に異なる結果を配列に代入。その配列をメインプログラムに返します。

<?php
if(isset($_GET['str'])) {
$str = $_GET['str'];

Switch ($str) {
case 1:
  $array = array("no" => 1, "country" => 'Japan');
  break;
case 3:
  $array = array("no" => 3, "country" => 'America');
  break;
case 5:
  $array = array("no" => 5, "country" => 'Taiwan');
  break;
default:
  $array = array("no" => 0, "country" => '不明');
}

echo json_encode($array);
unset($array);
}
?>

定義済み変数 $_GET については公式をご覧下さい。

関数issetは「変数（パラメータ）が正しく入っているかの検査です」（公式）

JSON（JavaScript Object Notation）形式で戻すJSON関数については公式をご覧下さい。

関数unsetは「変数の割り当て解除です」（公式）※ここでのunsetは不要ですが学習のために使用しました。

3.　※1のソースから抜粋しています。

2で返されたデータ（データ構造体）を項目ごとに定義し、それらをテーブルの各項目にセットします

    var data = <?="this.response"?>;
    document.getElementById("no").innerHTML = data.no;
    document.getElementById("country").innerHTML = data.country;
});

  request.send();
}
//-->
</script>
<input type="button" value="検索" onclick="c_seek()">
</form>
<table border="1">
<tr><td>No.</td><td id="no">-</td></tr>
<tr><td>国名</td><td id="country">-</div></tr>
</table>

getElementByIdは「HTMLソース内の各項目にアクセスするための名前付け」です（詳細）

サブプログラム内で

“no” => 1

“country” => ‘Japan’

といった値が配列としてセットされているので、受け取る側も

data.no

data.country

と同じ固有名で受け取っています。（同じ名前で再定義）

※データ構造体の中身は「noとcountry」の２つだけです。

受け取った data.no と data.country の値をテーブル内の no と country にセットして表示して終わりです。

→PHPメニューへ戻る