フォーム送信をAjaxで実行&画面更新までできるApplicationController（その4）「同時送信」
引き続きApplicationControllerを使ったAjax処理の省力化について紹介します。今回はフォームの同時送信です。
HTMLでは基本的に一回のアクションで一つのフォームしか送信できません。しかしAjaxであれば並行処理を使って同時送信も可能です。ApplicationControllerではごく簡単に実装できます。
実装方法としては h5-refresh-group を指定します。この名前が同じであれば、同時に送信されるようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
JavaScriptは変わりません。特別な設定は不要です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| h5.core.controller('body', h5.ui.container.ApplicationController); | |
| }); |
これだけでフォームを送信すると二つのフォームが同時に送信されるようになります。インジケータも二つ同時に回っているのが分かります。
実際のデモはこちらにて確認できます。サーバ送信部分はモックですが、サーバを立てた場合と同じです。
二つの要素を同時に更新したいという時に使えます。特に、フォーム内で同じnameであったとしても使えるのが利点と言えるでしょう（通常のHTMLで、一つのフォーム内に同じname指定があると上書きしてしまいます）。
hifive開発者ブログ 
コメントは受け付けていません。