コンテンツへスキップ

フォーム送信をAjaxで実行&画面更新までできるApplicationController(その4)「同時送信」

by : 2017/05/31

引き続きApplicationControllerを使ったAjax処理の省力化について紹介します。今回はフォームの同時送信です。

HTMLでは基本的に一回のアクションで一つのフォームしか送信できません。しかしAjaxであれば並行処理を使って同時送信も可能です。ApplicationControllerではごく簡単に実装できます。

実装方法としては h5-refresh-group を指定します。この名前が同じであれば、同時に送信されるようになります。

<form action="jsp/welcome-json.jsp" h5-refresh-group="group">
<label>名前</label><input type="text" class="name" name="name" value="たろう" />
<p data-h5-bind="message">更新対象</p>
<input type="submit" />
</form>
<form action="jsp/welcome-json.jsp" h5-refresh-group="group">
<label>名前</label><input type="text" class="name" name="name" value="じろう" />
<p data-h5-bind="message">更新対象</p>
<input type="submit" />
</form>

view raw
index.html
hosted with ❤ by GitHub

JavaScriptは変わりません。特別な設定は不要です。

$(function() {
h5.core.controller('body', h5.ui.container.ApplicationController);
});

view raw
index.js
hosted with ❤ by GitHub

これだけでフォームを送信すると二つのフォームが同時に送信されるようになります。インジケータも二つ同時に回っているのが分かります。

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

二つの要素を同時に更新したいという時に使えます。特に、フォーム内で同じnameであったとしても使えるのが利点と言えるでしょう(通常のHTMLで、一つのフォーム内に同じname指定があると上書きしてしまいます)。

From → hifive, HTML5

コメントは受け付けていません。

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