システム開発ブログ

【PHP】jQueryでAjaxを使用するサンプル

青木

青木 (2011年1月13日 10:47)
産業システム部

みなさん、こんにちは。
産業システム部の青木です。

備忘録を兼ねて、タイトルのサンプルを書いていきます。
サーバー側の処理はPHP、サーバーからの戻り値はJSON形式というサンプルです。

１．jQueryをダウンロードする
　http://jquery.com/ にアクセスし、「↓Download（jQuery）」のリンクよりダウンロードします。

２．今回はサーバー側の処理をPHPで書きます。また、戻り値はJSON形式にしています。
　　ファイル名は「AjaxSample.php」とします。

<?php
// クライアントから送信される会社コードを取得します
$kaisha_id = $_GET['kaisha_id'];

// クライアントに返す検索結果
$response = array();

// データベースより部署を取得します
if (strlen($kaisha_id) != 0) {
	$link = mysql_connect('DBサーバー名', 'DBユーザー名', 'DBパスワード');
	mysql_select_db('DB名');
	mysql_query("SET NAMES utf8", $link);
	$sql  = "SELECT busho_id";
	$sql .= "     , busho_mei";
	$sql .= "  FROM busho";
	$sql .= sprintf(" WHERE  kaisha_id = '%s'", mysql_real_escape_string($kaisha_id));
	$sql .= " ORDER BY hyoji_jun";
	$result = mysql_query($sql, $link);
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		array_push($response, $row);
	}
}
echo(json_encode($response));
?>

３．javascriptでクライアント側の処理を書きます。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajaxサンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
function doChangeKaisha() {
	$.getJSON("AjaxSample.php"
			, { kaisha_id: $("#kaisha_id").value }
			, function (data, status) {
				var bushoList = $("#busho_id");
				bushoList.length = 0;
				bushoList.options[0] = new Option("--部署を選択して下さい--", "")
				for (i in data) {
					var row = data[i];
					bushoList.options[bushoList.length] = new Option(row['busho_mei'], row['busho_id'])
				}
			 }
	);
}
</script>
</head>
<body>
<select id="kaisha_id" name="kaisha_id" onchange="doChangeKaisha()">
	<option value="">--会社を選択してください--</option>
	<option value="A">株式会社アイロベックス</option>
	<option value="B">株式会社青木</option>
</select>
<select id="busho_id" name="busho_id">
	<option value="">--部署を選択してください--</option>
</select>
</body>
</html>

会社リストボックスを変更することにより、動的に部署リストボックスの内容が変更されます。
システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

システム開発ブログ

Twitterでilovex_officialをフォローしてください

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

ページのトップ