Skip to content

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

by : 2017/05/17

最近の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実装がごく簡単になるでしょう。

From → hifive

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。