フォーム送信をAjaxで実行&画面更新までできるApplicationController（その1）「基本的な使い方」

最近のWebアプリケーションではAjaxを使うのが当たり前になっています。そしてAjaxでフォームデータを送信した後、データをハンドリングして画面を更新したりします。これはよくあるコードであり、最近の開発でよくいうDRY（Don’t repeat yourself）に反すると言えます。

hifiveではそのようなごく基本的なAjax処理についてApplicationControllerでほぼコーディングなしで実装できるようになっています。今回はその基本形の紹介です。

例えば次のようなHTMLがあります。

これは app.jsp に対してnameデータを送信するものと言えます。これに対してhifiveで次のように h5.ui.container.ApplicationController を適用します。

これで実行するとWebブラウザは表示をリフレッシュせず、Ajaxで送信を行います。そして結果をそのままフォーム全体にして適用します。

この時のレスポンスはサーバからHTMLをそのまま返しています。

実際のデモはこちらにて確認できます。サーバ送信部分はモックですが、サーバを立てた場合と同じです。

インジケータを出すような表示も自動で行ってくれます。ApplicationControllerを使えばAjax実装がごく簡単になるでしょう。