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 type="text/javascript">
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;

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です