formにajaxでのpost機能を後付する

はじめに

　formに入力されたデータをsubmitするという基本的な機能を備えたウェブアプリの制作に携わっています。
ここで、入力データを用いてサーバー側で実装済みの所定の計算を行い結果を画面に表示するという機能が追加されました。
本来であれば計算処理をフロントに持ってきてjavascriptを使ってデータの取得と計算を行うのが良いのですが

• 実装されている計算というのが非常に難解で、再実装するのに手間がかかる
• そもそも処理内容自体がフロント側という見ようと思えば見ることの出来るところに持ってくるべきでないもの

他にも事情はあるのですが大まかに上記二点によって、サーバー側に入力内容をpostし結果を表示するという形にせざるを得なくなりました。さらに、入力内容を変更して何度も計算結果を確認するだろうということから、一々ロードを挟まないようajaxも活用することになりました。

　以上から、「既存のformに後からajaxでpostし結果を受け取って何か処理する機能を付ける」という問題に対処しましたが、簡単にできるだろうと思っていたら少し苦労したので、シンプルな対応方法を調査しました。

方法

$.post(
  $('.form-class').attr('action'),
  $('.form-class').serializeArray(),
  function(result) {
    //適当な処理
  },
  'json'
);

form-classは対象となるformに設定されているclassです。

参考