【Ajax】jQuery + PHP のJSON連携サンプルの覚え書き

動作確認の環境

サーバ：CentOS Apache/2.2.3
クライアント：Windos XP Opera 11.50
PHP：5.1.6
jQuery：1.6.2 Uncompressed Code
JSON.php ：1.31

処理の流れは、

[クライアント] テキストエリアに文字列を入力
[クライアント] 送信ボタン押下でテキストをサーバへ送信
[サーバ] 取得したテキストと時刻でJSONデータを作成
[クライアント] サーバからのJSONデータを処理して、画面に表示

画面スクリーンショット

クライアント側のサンプル

jQueryのサイトへアクセスしてDonwloadボタンでjsファイルをダウンロードします。ソースを見やすいようにUncompressed版にしました。

http://jquery.com/

現在最新は1.6.2でした。これをサーバへアップロード。上図の画面を表示すべくサンプルソースは、

<html>
<head>
    <script type="text/javascript" src="./jquery-1.6.2.js">
    </script>

    <script type="text/javascript">
        $(function(){
        	// 初期化処理
        	$("#frmSend").submit(function(){
        		send($("#keyword").val());
        		return false;
        	});

        });

       function send(keyword) {
       	// 送信処理
       	$.ajax({
       		type:"POST",
       		url:"http://takaiwa.net/"
       			+"works/public/samplepg/20110721/server.php",
       		data: {	// 付加する情報
       			"keyword":keyword
       		},
       		success: function(ret) {
       			// サーバからのレスポンス処理
       			var jsonObj = eval(ret);
       			var str = "";
		       	if(jsonObj[0].timestamp) {
		       		str = jsonObj[0].timestamp + ":";
		       	}
		       	if(jsonObj[0].keyword) {
		       		str += jsonObj[0].keyword;
		       	}
				str += "<br>";
       			$("#disp").append(str);
       		}
       	});
       }

    </script>
</head>
<body>
<form id="frmSend">
  <textarea type="text" id="keyword" rows="6" cols="40"></textarea>
  <BR>
  <input type="submit" value="送信">
</form>
 <br>
 <div id="disp"></div>
</body>
</html>

初期化処理で、送信ボタンを押したら、send関数を実行するようにしています。send関数への引数は、textarea内のデータ。

また、send関数内のsuccessはサーバの処理が成功して返ってきたら実行する関数です。引数retにJSONデータが格納されています。

[JSONデータ例]

[
 {
  "timestamp":"2011-07-21 09:11:32",
  "keyword":"hogehoge"
 }
]

※見やすく改行等を入れてる

jsonデータはeval関数を使って、JavaScriptオブジェクトに変換しています。この時、JSONデータの書式に誤りがあ場合は、JavaScriptエラーになります。Operaの場合は、Operaボタン → ページ → 開発者用ツール → エラーコンソールでエラーを確認できます。

サーバ側のサンプル

JSONデータを作成するにあたり、PEARのJSON.phpライブラリを使用します。

http://mike.teczno.com/JSON.tar.gz

これをコマンドで、

# wget http://mike.teczno.com/JSON.tar.gz

でサンプルファイルと同じディレクトリへダウンロードし、

# tar xzvf JSON.tar.gz

コマンドで解凍すると、JSON.phpファイルが出現します。これを利用して、

<?php
require_once "./JSON.php";

	// 一旦、配列として格納
	$arr = array();
	$data["timestamp"] = date("Y-m-d H:i:s");
	$data["keyword"] = $_POST["keyword"];
	
	array_push($arr, $data);
	
	// 配列をJSONデータに変更
	$json = new Services_JSON;
	$encode = $json->encode($arr);

	echo $encode;

?>

連想配列を作成してから、エンコードしてJSONデータを作成します。これにより作成されるJSONデータは上記に示したような形式です。

デモ

デモページへのリンク

jQueryで作る Ajaxアプリケーション

posted with amazlet at 11.09.03

沖林正紀
技術評論社
売り上げランキング: 144718

Amazon.co.jp で詳細を見る

takaiwa.net

このブログを検索