[jQuery]Ajaxでformの値を送信する

Tips

jQuery でフォームの値を ajax で送信する方法

 1<form name="example_form" method="post" action="">
 2  <input type="hidden" name="name1" value="value1" />
 3  <input type="text" name="name2" value="" />
 4  <input type="radio" name="name3" value="31" />
 5  <input type="radio" name="name3" value="32" />
 6</form>
 7
 8<button class="onSend">ajaxで送信</button> (1)
 9
10<script>
11  $(function () {
12    $(".onSend").on('click', function () { (2)
13      var obj = document.forms["example_form"];
14      $.ajax("/path/to/url", {
15        type: 'post',
16        data: $(obj).serialize(), (3)
17        dataType: 'json'
18      }).done(function(data) {
19        console.log("成功");
20      }).fail(function(data) {
21        console.log("失敗");
22      });
23    });
24  });
25</script>
1 送信ボタン
2 <1>のボタンのクリックハンドラ
3 formの値のシリアライズ、name1=value1&name2=test&name3=32のように変換される。

フォームのsubmitボタンを送信のトリガーとする場合は本来のフォーム送信を取り消す処理を忘れないようにすること。

 1<form name="example_form" method="post" action="">
 2
 3  ...
 4
 5  <input type="submit" value="ajaxで送信" class="onSend" />
 6</form>
 7<script>
 8  $(function () {
 9    $(".onSend").on('click', function (e) {
10      e.preventDefault();
11
12      ...
13    });
14  });
15</script>

とか

 1<form name="example_form" method="post" action="">
 2
 3  ...
 4
 5  <input type="submit" value="ajaxで送信" class="onSend" />
 6</form>
 7<script>
 8  $(function () {
 9    $(".onSend").on('click', function () {
10
11      ...
12
13      return false;
14    });
15  });
16</script>

など