jQuery の Ajax を使って再描画なしのリロード・送信 (作りかけ)

作りかけでも勉強過程を記事にしていくことにする。

jQuery の Ajax で非同期通信

基本形はこんな感じ。このスクリプトを動作させる HTML 上に #content の要素を設置しておく。

$.ajax({
  type: "GET",
  url: "/GetContents.do",
  success: function(data) {
    $('#content').html(data);
  },
  error: function() {
    alert("Error");
  }
});

最近は success や error ではなく、.done() や .fail() を使った Deferred の記述になっている。使用する jQuery のバージョンに合わせて読み替えられるようになりたい。

画面再描画なしのリロード

上のコードを function loadContents() とでもして関数にしておき、起動時に呼び出し + 一定期間で再呼び出し、とすることで、画面全体を再描画することなく、読み込んだ内容を反映することができる。

$(function() {
  loadContents();    // 初期表示時の初回呼び出し
  setInterval("loadContents()", 5000); // 5秒間隔で実行
});

これでチャットっぽいモノも作れそう。

画面再描画なしのフォーム送信

jQuery の Ajax で Post 送信もできるが、既存のフォームを利用してそのまま送信するには以下のように書く。

まずは HTML 部分。

<form action="/PostMessage.do" type="post" id="message-form">
  <p>Name : <input type="text" name="name" value=""/></p>
  <p>Message : <input type="text" name="message" value=""/></p>
  <p><input type="submit" value="送信"/></p>
</form>

$("#message-form").submit(function(event) {
  // イベントを中断 (HTML からの送信をキャンセルする)
  event.preventDefault();
  
  var $form = $(this);
  
  $.ajax({
    url: $form.attr("action"),
    type: $form.attr("method"),
    data: $form.serialize(),    // ココがミソ！
    success: function(result, textStatus, xhr) {
      // Message 欄を空にする
      $("message").val("");
    },
    error: function(xhr, textStatus, error) {
      alert("NG");
    }
  });
});

data プロパティに対して serialize() を使うことで、Form 要素内の各項目を送信可能な形式に並べ替えて送信することが可能。

一通り動作するものが作れたらまたお知らせします。

参考