Ajax でフォームポスト

(function($) {

$.fn.ajaxPost = function(callback, options) {
    var default_options = {
        data_type: 'html',
        before_send: function() {},
        error_handler: function() {}
    };

    options = $.extend(default_options, options)
    return this.each(function(){
        if(this.tagName.toLowerCase() != 'form') return;
        var f = $(this);
        var submit = f.find('button[@type="submit"], input[@type="submit"]')

        f.submit(function(e) {
            e.preventDefault();

            $.ajax({
                url: f.attr('action'),
                type: 'POST',
                data: f.serialize() + '&mode=ajax',
                dataType: options.data_type,
                beforeSend: function() {
                    submit.attr('disabled', 'disabled')
                    options.before_send();
                },
                success: callback,
                error: options.error_handler,
                complete: function(xhr, textStatus) {
                    submit.removeAttr('disabled')
                }
            });
        });
    });
}

})(jQuery)

使い方

<form action="/hoge" id="hoge">
  .....
</form>

$('#hoge').ajaxPost(function(data, textStatus) {
    alert(data);
});

jQuery の $.ajax はほんと便利。

追記 2009/2/12 22:50

修正。complete オプションがあったのね。

追記 2009/2/15 19:10

jQuery 1.3 からセレクタの指定の仕方が変わったので
submit ボタンを指定するところを

        var submit = f.find('button[type=submit], input[type=submit]')

と @ を使わないようにしないといけない模様。

参考

http://h2ham.seesaa.net/article/112629024.html