formをajaxで呼び出すjquery拡張

formに入力させてsubmitされたらajaxでphp呼び出して〜って良くある処理を簡略化する拡張

jQureryを拡張する。

jquery.ajaxFrom.jsとか適当に名前を付けて保存します。
〜内にではさんで書いても大丈夫。

/* (C) makoto@2ch.to */
if(jQuery) jQuery.fn.extend({
	ajaxForm	: function($_){
		var $opt = {};
		if( typeof $_ === 'function' ) $opt.success = $_;
		if( typeof $_ === 'object'   ) $opt = $.extend($opt,$_);
		return $(this).submit(function(event){
			event.preventDefault();
			return jQuery.ajax($.extend({
				url			: jQuery(this).attr('action'),
				type		: jQuery(this).attr('method'),
				data		: jQuery(this).serialize(),
				dataType	: jQuery(this).attr('data-type') || 'json',
			},$opt) );
		});
	}
});

jqueryとjquery.ajaxForm.jsを呼び出す

jQueryの後にロードしないとダメ

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="./ajaxForm.js"></script>

使い方は二通り

関数を渡す

submitが押されてajax通信がsuccessだった時の処理を関数で渡します。

var $opt = jQuery('#form').ajaxForm(function($_){
	console.log($_);
});

オブジェクトを渡す

jQuery.ajaxが受け付けるパラメータならなんでも書けます。

var $opt = {
	success:function($_){
		console.log($_);
	},
	error: function(){
		//エラー処理
	}
};
jQuery(form).ajaxForm($opt);

その他

デフォルトだとactionの実行結果はjsonを期待しています。
htmlやtextが変える場合formにdata-typeエレメントを定義することで変更することができます。

<form action="login.php" method="post" data-type="html">
<input type="text" name="i">
<input type="password" name="p">
</form>