IoTの全体像の例「照度センサーの情報を表示する」
http://ameblo.jp/smeokano/entry-12240624461.html
の続きです。上記のエントリーで
「それぞれの詳しいプログラムは、後日、この下に掲示します。」
とありますが、その「詳しいプログラム」第四弾、表示部分です。
●表示部とは
サーバーからWebAPI経由で、データを呼び出し、それを表示します。
●表示部の概要
JQueryのAJAXで、データを呼び出します
URL getdata
引数 id 取得したいデータのID
間隔：１秒ごと（setTimeoutを再帰して呼び出し）
結果を受け取ったら、JQueryで表示します
●プログラム
以下のHTMLファイルを
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
var timeout_id = null;
$(function(){
// 1秒後に処理を行う設定
timeout_id = setTimeout(dataGet(), 1000);
});
function dataGet()
{
data = {};
hiduke=new Date();
data["id"] = hiduke.getTime();
$.ajax({
type: "GET",
url: "getdata",
data:data,
dataType:"text",
success: function(ret){
// この中で、データ表示する
$("#val").html(ret);
timeout_id = setTimeout(dataGet(), 1000);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
errMsgProc(XMLHttpRequest, textStatus, errorThrown);
}
});
}
</script>
<title>照度モニター</title>
</head>
<body style="background-color: #ccffff">
<h1>照度モニター</h1>
<div style="text-align: center;font-size: 96pt;" id="val"></div>
</body>
</html>
index.htmlという名前で、プロジェクトのsrc/main/resources の下のstaticフォルダ
に保存します。
詳しくは、以下を参照してください。
Spring Bootしてみる その４ HTML+JSでREST API呼び出し
http://ameblo.jp/smeokano/entry-12239260588.html
