Japanese / English
簡易Ajax掲示板の作成
簡易掲示板の作成を行います。
作成する掲示板は非常にシンプルなもので、名前と1行メッセージを書き込むことができるものということにします。
はじめに、HTML部の作成を行います。
書き込みフォームと、メッセージを表示する領域を有する簡単なHTMLを作ります。
formタグを用いて書き込むフォームを作り、id="messages"の領域をメッセージを表示する領域とします。

名前
メッセージ
フォームを作りました。 では、このフォームがsubmitされたときに画面遷移なしでデータがサーバ側に送られるようにします。
送信先は、bbs.phpとします。
また、データの送信終了後フォームに入力されたメッセージをリセットする処理を加えます。
これでデータの送信に関する処理ができました。

次にサーバ側のbbs.phpでどのような処理を行うかを考えます。
ここでは、サーバ側の処理は本題ではないので、できるだけサーバ側の処理は簡単になるようにします。
サーバでは書き込みをmessages.htmlに下に下に以下の形式で書き込んでいくものとします。
messages.htmlのパーミッションは666とします。
以下、bbs.phpです。

<?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を取得すればよいということになります。
messages.htmlを取得してdiv領域に挿入する処理を作成します。
$.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のソースです。

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

Back to top

Information