【jQuery + Ajax】フォームをsubmitした時にAjax送信する方法

ajax

jQueryのフォームをsubmitした時、画面遷移するのではなく、Ajaxを使って同一画面内に結果を表示する方法を紹介します。

[スポンサーリンク]

Ajaxを使用する場合、submitを使用することは少ないと思います。
button type="button"を使用することが多いのではないでしょうか。

ただし、画面の仕様上、submitを使わなくてはいけないこともあります。
そんな時は、今回紹介する方法を使用して下さい。

この章でやること

submit時にAjaxを使用する方法を紹介します。

submit時にAjaxを使用するサンプルソース


<form data-abide id="form1">
    <input type="text" id="text1">
    <button type="submit" id="submit-button">submit</button>
</form>

<script>
$('#form1').submit(function(event) {
    // ここでsubmitをキャンセルします。
    event.preventDefault();
    // Ajax処理
    $.ajax({
      url: 'http://localhost:8080/test',
      type:'GET',
      dataType: 'jsonp',
      data : {getData : 'test'},
      timeout:10000,
      success: function(data) {
              alert("ok");
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
              alert("ok");
      }
    });
});
</script>

解説

9行目の「event.preventDefault()」を呼ぶと、本来動作するアクション(submit)がキャンセルされます。

上記のサンプルソースでは、「$('#form1').submit(」のsubmitのアクションがキャンセルされ、11行目以降のAjaxの処理が実行されます。
この方法であれば、submitでも通常のAjax処理が実行されるので、同一画面内に結果を表示することが可能となります。

さいごに

通常の開発では、フォームをsubmitした後、Ajax処理するということ自体は、あまりやらないと思います。
どうしても、submitを使用したいという時に限り、今回紹介した方法で実装していきます。

「event.preventDefault()」自体は、submitをキャンセルする。という動きではなく、アクション全般をキャンセルするという動きとなります。
今回のサンプルソースのアクションがsubmitだったため、sumbit("アクション")をキャンセル(停止)しているように見えます。

今回の方法であれば、フォームをsubmit時にAjaxを使用することをが可能になります。
フォームをsubmit+Ajaxを使用したい場合は、どうぞこちらの方法を参考にしてください。
それでは!