JavaScriptとPHPで連携について

以前にも似たようなことを書いたような・・・

ブラウザ（クライアント）側とサーバー側でデータを受け渡して連携しながら、それぞれ必要な処理をしていくときの処理の流れについて。

下のプログラムは、JavaScriptを使いブラウザ（クライアント）側でデータを受け取り、そのデータをPHPに渡してサーバー側でデータの処理をして、処理した結果をクライアント側に返してJavaScriptでその結果を表示（加工）するプログラムです。

test.html

サーバー側（PHP）に値（データ）を渡して必要な処理をするのが、JavaScriptの$.getになります。$.getでは、第一引数に読み込むファイルを第二引数に渡すパラメータを設定して、第三引数にサーバー側で処理して返ってきたデータを処理する関数を設定しています。

$.get(‘読み込むファイル’, パラメータ, 関数)

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function keisan(width, height) {
	var obj = {};
	obj['width'] = width;
	obj['height'] = height;
	$.get('test.php', obj, function(data) {
		$('#show').text(data);
	});
}
</script>

<div id="show"></div>
<input type="button" id="button" value="クリック" onclick="keisan(4,5)" />

このプログラムの流れについてですが、inputタグのonclickでkeisan関数を呼び出して引数を渡してobj変数に引数の値をそれぞれ代入しています。次に$.getでサーバー側のtest.phpファイルを読み込みます。

test.phpファイル（サーバー側）では、パラメータobjにあるデータを$GETを使い取得し計算して出力しています。

test.phpファイルで出力した結果を$.get（ブラウザ側）の第三引数にある関数で受け取って結果を表示しています。

test.php

<?php
$width = $_GET['width'];
$height = $_GET['height'];
print $width * $height;