Android、Java、Web系、Linux、マラソン等の備忘録

2011/07/21

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

0 件のコメント

動作確認の環境

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

処理の流れは、

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

Screenshot_1
画面スクリーンショット





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

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ボタン → ページ → 開発者用ツール → エラーコンソールでエラーを確認できます。




WS000168





サーバ側のサンプル


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アプリケーション
沖林 正紀
技術評論社
売り上げランキング: 144718

0 件のコメント :

コメントを投稿