ajaxでサーバーにformデータを送信したい

Question

###前提・実現したいこと
ajaxでサーバーサイドにformデータを送信したいです。

###実装の抜粋ソースコード

var requestUrl = 'sample.php';
var $form = $('#form')
$.ajax({
  url: requestUrl,
  timeout: 10000,
  data: $form.serialize(),
  done: function() {...},
  fail: function() {...}
})

<form action='hoge' id="form">
  <input type="text">
  ～～
</form>

###確認したこと
chromeの開発者ツール内、Networkタブで確認したところ、Request URLにはajaxのurlの値とdataで設定した$(form).serialize()の値が連結された形で確認できました。

これは私がやろうとしている、『サーバーにformデータを送る』ということが実現できている。

簡単に言うと、この書き方で合っているのでしょうか？

すみませんが、よろしくお願いします。

Comments

[Lhankor_Mhy]

ローカル側で送信したことは確認できますが、届いたかどうかはサーバ側でしか分からないのでは。もちろん、サーバでレスポンスを返せば間接的に分かると思いますが。

[souta-haruran]

ご回答ありがとうございます。なるほど、やはり開発者ツールなどで分かるという事でないんですね。

[Lhankor_Mhy]

繰り返しになりますが、「送れたかどうか」は確認できますし、リクエストを飛ばしているのでなんらかの応答も帰ってきているはずです。たとえばwebAPIへの送信確認ならそれで十分です。

[souta-haruran]

何度もありがとうございます、仰っていること理解できました。ちなみに今回のケースで例えると、本件のようにサーバーにformデータを送りたい場合などのコードの書き方というのは、抜粋ソースコードに書いたような書き方で合ってるものでしょうか？

[Lhankor_Mhy]

問題ありません。http://api.jquery.com/jQuery.ajax/ を見ますと、dataは`PlainObject or String or Array`となっており、Stringの場合はクエリストリングに解釈する、となっています。 一方で、http://api.jquery.com/serialize/ を見ると、serialize()はクエリストリングを返すことになっていますから、問題ないことになります。

[souta-haruran]

ご丁寧にご回答いただきありがとうございました。大変助かりましたし勉強になりました。

Answer 1

data: $form.serialize(),
↓↓↓
data:new FormData($('#form').get(0))

としてはいかがでしょうか？

Comments

[souta-haruran]

ご回答ありがとうございます。
可能であればお伺いしたいのですが、
━━━━━━━
data: $form.serialize(),
━━━━━━━
と
━━━━━━━
data:new FormData($('#form').get(0))
━━━━━━━
の違いと言いますか、ご提案いただいた記述方法のメリットを伺えればと思います。
よろしくお願いします。

※調べてみたのですが、記述方法は掲載されていますが、メリットが読み解けるに至りませんでした。

[Lhankor_Mhy]

横からですが、jQueryの.serialize()はファイルなどのバイトデータを送信することができないです。

なお、FormDataとjQueryを同居させるにはオプションを設定する必要があります。以下をご参照ください。
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects#Sending_files_using_a_FormData_object

[souta-haruran]

Lhankor_Mhyさん
何度もご回答頂きありがとうございます。

そのような理由からなんですね。

オプションの設定についても知識及ばず認識していませんでした。

大変勉強になりました。