スキップしてメイン コンテンツに移動

【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

処理の流れは、

  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

コメント

このブログの人気の投稿

GolangでWindows GUIアプリケーション

GUIアプリ作成の前提 社内ツールとしてexeで配布 開発環境はGoLandを使う 社内ツールとしてexeを配布ということであれば、Visual StudioでC#による開発だと思います。しかしながら、Go言語を習得したいのと、GoLandの補完機能が便利で、Android Studio使っていたこともあり、とっつきやすいという点からGo縛りでGUIアプリケーションを考えたいと思います。 lxn/walk Windows application library kit for Go. Windows向けしか考えていないので、まずこのライブラリなのですが、ボタンやコンボボックスが思ったように並ばなかったり、手軽にイメージボタンを配置したりなど、簡単にレイアウトを変更できない課題に直面しました。レイアウト作成だけで時間を取られてしまいます。そう言えば、Androidアプリ開発のときは、XMLでデザイン部分を切り離してたのを思い出して、今回の調査の運びとなりました。 fyne-io/fyne Cross platform native GUIs designed for Go based on Material Design. Supports: Linux, macOS, Windows, BSD, iOS and Android. walkと比べると、クロスプラットフォームで作成できるのですが、こちらもコードの中にデザインを書いていく形でした。 therecipe/qt therecipe/qt allows you to write Qt applications entirely in Go or JavaScript. Qt Creatorなるものがあるようで、デザイン部分を切り離せる印象はあるものの、最新のPCでもビルドに時間がかかるようで、学習コストもかかるという記事を見かけて断念しました。 どうしたものかとツイートしましたら、下記のようにご助言をいただいた。 同じ課題に対し色々試した結果、PWAのフルキャッシュドに落ち着いた。中身はGo+WASMで。 https://t.co/e60whDTV16 — のぼのぼ📡 (@nobonobo) July 21, 2020 PWA 早速調べてみました。Googleが進めているプロジェクトで、ネイティブアプリのよ

Javaでprivateなfieldやmethodにアクセスする

JUnitでテストしてると、privateなフィールドにアクセスして、値を参照したりセットしたりしたくなるわけですが、よく使うのでメモしておきます。 例えば、次のような対象のクラスがあるとします。 public class ParentClass { private String hoge = "ParentClass!!"; public void dispMsg() { System.out.println("dispMsg:" + hoge); } private void privateDispMsg(String msg) { System.out.println("dispMsg:" + msg); } }

Eclipseで一通り基本的なGitを使ってみる

備忘録的にまとめておきたいと思います。おかしな点があればご指摘いただければ幸いです。 目次 環境 プロジェクト作成~初コミットまで コミットの履歴&差分を見る 元に戻す ブランチについて ブランチを作成してみる ブランチを統合するには マージする Rebaseする ローカルリポジトリからプロジェクトを取り込む コミットしたメッセージの修正 環境 Eclipse IDE for Java Developers:Juno Service Release 1 Git:上記Eclipseのプリインストール版