簡易掲示板の作成を行います。
作成する掲示板は非常にシンプルなもので、名前と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; });