簡易掲示板の作成を行います。
作成する掲示板は非常にシンプルなもので、名前と1行メッセージを書き込むことができるものということにします。
はじめに、HTML部の作成を行います。
書き込みフォームと、メッセージを表示する領域を有する簡単なHTMLを作ります。
formタグを用いて書き込むフォームを作り、id="messages"の領域をメッセージを表示する領域とします。
<?php
if( empty($_POST["name"]) or empty($_POST["message"] ) ){
echo '名前かメッセージが入力されていません。';
exit();
} else
echo '書き込み完了';
$fp = fopen("messages.html", "a+");
fputs($fp, sprintf("<b>%s</b> 「%s」<br />", $_POST["name"], $_POST["message"]));
fclose($fp);
?>
以下、messages.htmlです。<b>名前</b> 「メッセージ」<br>よって、表示するメッセージを取得するにはmessages.htmlを取得すればよいということになります。
$.get("messages.html", function(response){
$("#messages").html(response);
});
この処理を、書き込み完了後およびページ読み込み直後に行うようにします。
function load_message(){
$.get("messages.html", function(response){
$("#messages").html(response);
});
}
$(document).ready(function(){
load_message();
$("form").submit(function(){
$.post("bbs.php", $(this).serialize(), function(response){
alert(response);
load_message();
} );
return false;
});
});
これで簡易掲示板が完成です。
<form>
名前: <input type="text" name="name">
メッセージ: <input type="text" name="message" size="60">
<input type="submit" value="送信">
</form>
<div id="messages"></div>
以下は、formがサブミットされた時の処理です。
$("form").submit(function(){
$.post("bbs.php", $(this).serialize(), function(response){
alert(response);
$("input[name='message']").val("");
} );
return false;
});