非同期通信でサーバー処理する場合のformやsubmitの取り扱いについて

とても基本的なことかもしれませんが、いつもこれで良いのかと自問自答してしまうので、お尋ねさせてください。
非同期でサーバー処理させる場合、以下のPattern1（form機能を使用する）とPattern2(form機能を使用しない)の2通りの方法があり、どちらでも一般的には非同期でサーバー側の処理をするという意味では同じことが実現できると思います。おそらくhtmlには標準でform機能があるため、これを利用すべきであり、Pattern1が一般的に採用される方法なのではないかと想像しております。

一方で、Pattern1を採用した場合には、通常はsubmitを一旦キャンセルさせて様々な分岐を作り出すため、私はこれがいつもバグの温床になっている（自分のajaxやsubmitをキャンセルさせる方法の知識の乏しさが問題ではあるのですが）ため、Pattern2で敢えてsubmit自体をキャンセルする必要がない方法を採用しております。

さて、重ねてになりますが、ケースバイケースが前提になるとは思いますが__一般的__に、Pattern2よりもやはりPattern1で実装すべきなのでしょうか？つまり、Pattern2は実装できるだけであってやるべきではない等、自分では気づいていないネガティブな要因があるのではという不安で投稿させていただきました。

html
1<!--Pattern1-->
2<form method="post">
3 <input type="text" name="sentence" class="hoge">
4 <input type="submit" value="送信する" class="foo">
5</form>
6
7<script>
8$(function(){
9  $('form').submit(function(){
10     $.ajax({
11                type:'POST',
12                url:'Ajax.php',
13                data:{
14                text:$('.hoge').val(),
15              }//後略
16  })
17})
18</script>

html
1<!--Pattern2(結局AJAXでPOSTするのでHTML上、formやsubmit自体を使用しない)-->
2 <input type="text" name="sentence" class="hoge">
3 <button type="button"　class="foo">送信する</button>
4
5
6<script>
7$(function(){
8  $('.foo').on('click',function(){
9     $.ajax({
10                type:'POST',
11                url:'Ajax.php',
12                data:{
13                text:$('.hoge').val(),
14              }//後略
15  })
16})
17</script>

行動規範の内容に同意します

回答1件

ベストアンサー

一般的に、要件次第です。
ただ言えるのは非同期通信自体はformからもinputからも切り離せる概念ということ。
渡すパラメータは別にフォーム入力から得られる値でなくても良いわけです。
実行タイミングもボタンクリックである必要もありません。

画面表示時にもできるし、
ボタンクリックじゃなく入力時にもできるし、
要件に合わせて任意のタイミングで使うことができます。

GWTなんかはあらゆる処理をAjaxで行っているので参考になるかもしれません。

投稿2019/08/21 14:11

m.ts10806

総合スコア80888

SugiuraY

2019/08/21 14:30

コメントをいただきありがとうございます。なるほど、一般的に実務でもケースによってはformやinputはたまsubmitを利用しないことは普通にあるのですね。やってはいけない方法というわけではないということをしれてよかったです、また、非同期通信の場合には別次元で考えるべき点は腹落ちいたしました。御礼申し上げます。