Mach3.laBlog

細かすぎて伝わらないjQuery拡張 (21) “$.fn.submitAsync” – Advent Calendar 2016

$.fn.submitAsync() は、form要素を非同期でsubmitするための関数です。

$.fn.submitAsync(options)

使い方

<form action="/" method="post" id="demo-form"> ... </form>

<script>

$("#demo-form").submitAsync()
.then(function(){
    console.log("--送信完了--");
});

</script>

返り値は $.ajax() なので、then/done 等で結果を受け取ることができます。 引数には $.ajax() のオプションを渡すことができます。

$("#demo-form").submitAsync({
    url: "/api/foo",
    dataType: "jsonp"
})
.then(function(){ ... });

送信先のURLは通常 action 属性が使用されますが、引数のオプションで上書きする事もできます。 リクエストメソッド(”type”)も同様。

コード

$.fn.submitAsync = function(options){
    var props = $.extend({
        url: this.prop("action"),
        type: this.prop("method"),
        data: this.serializeObject()
    }, options);
    return $.ajax(props);
};

Form の属性を読んで $.ajax() するだけの簡単なお仕事ですね。なくてもまったく困りません。 尚、内部で先に紹介した $.fn.serializeObject() を使用しています。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*