ページの一部だけ更新したい

Question

ひとつのファイル(main.php)のある要素(#load)にもう一つのファイル(parts.php)をロードして表示しています。

parts.phpではフォームに入力したものをデータベースに格納し、表示しています。

データベースに追記されていたらmain.phpの#loadだけ更新出来るようにしたいのですが、その方法を知りたいです。

よろしくお願いします。

Comments

[munyaX]

「データベースに追記されていたら」このイベントをどうやって捕捉する予定なのか追記いただけると回答しやすいです。

[nejico]

質問の意味がよく理解できなかったのですが、
parts.phpで参照しているテーブルに情報が追加されたら一部更新させたい。
ということで伝わりますか？

[munyaX]

ここで言われている「テーブル」とはMySQLなどのデータベース上のテーブルのことですか？それが更新されているか、いないのかをどうやって把握される予定なのか、その方法が知りたいという意図になります。更新有無を確認するAPIなどを作成されるのでしょうか？

[nejico]

テーブルはMySQLのテーブルです。
更新有無の方法までは考えていませんでした。

[munyaX]

おそらく更新有無の確認方法がこの案件のキモになると思いますが、何となく想像して回答してみますね。

Answer 1

更新有無を確認するAPI「/api/is_tableupdate.php」があったと想定すると、以下のような感じでしょうか（動作検証してません。イメージをつかんでいただければと）

<div id="load"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
	var timer = 1000 * 60; //60秒に1回

	setInterval(function(){
		$.getJSON("/api/is_tableupdate.php", function(json){
			if(json["is_update"]){
				$("#load").append(json["data"]);
			}
		});
	},timer);
});
</script>

setIntervalで一定秒数ごとにAPI「/api/is_tableupdate.php」を叩く。
APIからは、
・APIは結果としてJSONを返却する
・更新されていれば is_update に trueが入る。更新がなければfalse
・dataに更新内容のHTMLが入っている
という仕様を勝手に想像しました。

上記からJSONは
更新がない場合は {is_update:false}
更新がある場合は {is_update:true, data:"<p>12:00:00に更新されました</p>"}
といった形式になると思います。

実際に利用される際にはエラー処理など入れてくださいね。
あと大量にリクエストがあると大変なことになりますので、サーバ側の処理はキャッシュを使う、リクエスト間隔を調整するなどもろもろ慎重に組んでください。またサーバ側からHTMLを直接返しちゃってますが(面倒だったので)、APIからはデータを返し、HTMLへのレンダリングはJSでやった方が良いですね。
参考までに。