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

【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

コメント

このブログの人気の投稿

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); } }

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が進めているプロジェクトで、ネイティブアプリのよ

Eclipseの高速化メモ

Eclipseが重いと一言に言っても、いろいろな工程での話があると思いますが、過去記事のなども含めてこの記事にピックアップしておきたいと思います。以下はWindows環境での話です。