細かすぎて伝わらないjQuery拡張 (21) “$.fn.submitAsync” – Advent Calendar 2016
この記事は賞味期限切れです。(更新から1年が経過しています)
$.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() を使用しています。
コメント