既存の<form>要素をそのまま利用してAJAXでPOSTする

はじめに

jQueryを使えばAJAXを利用して画面遷移しないGETなりPOSTなりなんでもできますが、できればJavaScriptのコードはスッキリ書きたい。

そんな想いをいだきつつ、要素が10個近くありつつさらに大量のチェックボックスリストという可変な配列要素を含んだたいへんなformを、画面遷移しないで送らなければならない現実と睨めっこしていたんですが、これがなかなかググっても出てこない。

画面遷移無しのPOSTする方法なんてのは腐るほど出てくるんですが、どれもだいたい空オブジェクト作っては値をセットして送信するというえらく原始的な基本に忠実な手法が出てきます。

最初はform配下のinput要素をfindしてeachで回して～みたいなことしてたんですが、配列になったときとかの動作が闇すぎて使う気になれなくてのっぺりしてきたときに、serializeArray()という救世主を見つけたので紹介します。

サンプル

コード

こんなイメージ

<form id="myForm" action="/path/to/post" method="post">
  <input type="text" name="element1" />
   :
  <input type="checkbox" name="listData[]" />
  <input type="checkbox" name="listData[]" />
   :
</form>

上記コードの直後でもreadyでもどこでも適切なところへ

$('#myForm').on('submit', function(event) {
  event.preventDefault(); // 本来のPOSTを打ち消すおまじない
  $.post(
    $(this).attr('action'),
    $(this).serializeArray(),
    function(result) {
      alert('ｻｲﾀﾏ-----(・∀・)-----!!!');
    },
    'json'
  );
});

解説

使ってるメソッドもそんなに多くなくてそれぞれのリファレンスみたらだいたいわかるんでそんな語ることもないんですが、このコードの良いところは、$.postを利用する際にformのactionと各種要素を参照しているため、formの内容が変わったりしてもイイカンジに動くところです。

また、HTMLコード上は通常のformであるため、JavaScriptオフ状態でも問題なくpostされます(画面遷移がどうなるかは受け取り側のプログラムによりますが)。

実際にプロダクションで利用する際には、送信後にフラッシュメッセージを表示したり、二重送信防止したり、失敗したときの処理つけたり($.postもう使えないけど)などなど、ゴテゴテとくっつけてご利用くださいませ。

おわりに

そういえば最近のサイトって超絶リッチなJavaScriptが惜しげもなく動いてますけど、みんなもうnoscript対応とかしてないんでしょうかね...。