ExtJSの勉強もしてるんですがね、jQueryの方が楽ちんすぎて今でも使っているんです。
jQueryでは.load()とか.post()とか.get()とか書けば簡単にAJAXが書けますが、フォームをAJAXで扱いたい場合は「jQuery Form Plugin」を使うわけです。
これを使えばAJAXフォームの送信もカンタンカンタン。
APIリファレンスを日本語で書いたので覚え書きに載せときます。
って言っても、たいした量でもないので、いまいち分からなかったらプラグインファイルを見た方が早いですよー。
jQuery Form Plugin のAPI
■ ajaxForm()
AJAX処理したい任意のフォームを設定します。
詳細についてオプション値を設定することも出来ます（オプションについては下の方に）。
Chainable: Yes.
//オプション値なし
$('#myFormId').ajaxForm();
//オプション値あり
var options = {
target: '#divToUpdate',
url: 'comment.php'
};
$('#myFormId').ajaxForm(options);
■ ajaxSubmit
AJAX処理したい任意のフォームのsubmitにAJAXイベントをハンドリングします。
ajaxForm()と同様にオプションを設定できます（オプションについては下の方に）。
Chainable: Yes.
// attach handler to form's submit event
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
■ formSerialize
フォームのデータをjQueryのAJAX APIで利用可能な文字列のデータにシリアライズします（name1=value1&name2=value2）。
Chainable: No, this method returns a String.
var queryString = $('#myFormId').formSerialize();
// the data could now be submitted using $.get, $.post, $.ajax, etc
$.post('myscript.php', queryString);
■ fieldSerialize
指定したフィールドのみをjQueryのAJAX APIで利用可能な文字列のデータにシリアライズします（name1=value1&name2=value2）。
Chainable: No, this method returns a String.
var queryString = $('#myFormId .specialFields').fieldSerialize();
■ fieldValue
指定したフィールドの入力値（value）を配列で取得します。
Chainable: No, this method returns an array.
// get the value of the password input
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
■ resetForm
指定したフォームのデータをリセットします。
Chainable: Yes.
$('#myFormId').resetForm();
■ clearForm
指定したフォームのデータをクリアします。
resetFormとの違いは、resetFormの場合フォームの入力項目をデフォルト値にしますが、clearFormの場合フォームの入力項目を空白にします。
Chainable: Yes.
$('#myFormId').clearForm();
■ clearFields
指定したフィールドの値をクリアします。
Chainable: Yes.
$('#myFormId .specialFields').clearFields();
ajaxForm と ajaxSubmit のオプション値について
■ target
リクエスト後のサーバからの戻りを出力する場所を指定します。
jQueryオブジェクトやDOM要素で指定します。
■ url
フォームデータを送信するURLを設定できます。
デフォルトではactionで設定したURLになっています。
■ type
リクエストタイプをgetまたはpostで設定します。
デフォルトではmethodで設定したリクエストタイプになっています。
■ beforeSubmit
送信前に呼び出すコールバック関数を指定できます（validateなどの時に使用する）。
コールバック関数の戻り値がfalseの場合、フォームは実行されません。
コールバック関数に渡される引数は順番に以下の3つです。
・formData … フォームの入力値の配列データ。形式は以下のようになる。
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
・jqForm … フォームのjQueryオブジェクト
・options … AJAXフォームに設定したオプション値のオブジェクト
■ success
送信完了後に呼び出すコールバック関数を指定できます。
コールバック関数に渡される引数は順番に以下の2つです。
・responseText … リクエストで返されたtext
・statusText … リクエストのステータス
■ dataType
サーバ側のレスポンスのデータタイプをxml,json,scriptの中から指定出来ます。
■ resetForm
リクエストが成功した場合にフォームのデータをリセットするかどうかをtrue or falseで指定します。
デフォルトではnullです。
■ clearForm
リクエストが成功した場合にフォームのデータをクリアするかどうかをtrue or falseで指定します。
resetFormとの違いは、resetFormの場合フォームの入力項目をデフォルト値にしますが、clearFormの場合フォームの入力項目を空白にします。
デフォルトではnullです。
画像のAJAXアップロードフォームを作ってみる
簡単に画像のAJAXアップロードフォームを作ってみた
■ HTML
<h2 class="sub-title">jQuery Form Plugin を用いたAJAX Form</h2> <div id="uploadImage"></div> <div id="uploadMessage"></div> <form id="uploadForm" action="./ajax_form_upload/upload.php" method="post" enctype="multipart/form-data"> 画像アップロード：<input type="file" name="image" id="image" /> <input type="submit" value="Upload Image" /> </form>
■ Javascript
$(function(){
$("#uploadForm").ajaxForm({
success: uploadFormResponse,
dataType: "json",
resetForm: true
});
});
function uploadFormResponse(responseText, statusText){
var resMsg=statusText+" : "+responseText.message;
//alert(resMsg);
$("#uploadMessage").html(resMsg);
$("#uploadImage").html('<img src="./ajax_form_upload/images/'+responseText.file+'" />');
return true;
}
■ PHP
<?php
header("Content-Type: text/javascript; charset=utf-8");
if($_FILES["image"]){
$upImage=new uploadImage($_FILES["image"], "./images/", "upImage");
echo '{"message":"'.$upImage->message.'", "file":"upImage.'.$upImage->fileExt.'"}';
}
class uploadImage{
//画像アップロードクラス
}
?>
と、ここまで作ってみたけど一度アップロードしてもう一度アップロードしようとするとSafariで上手くいかない！
最初にアップロードしたときに何かが引っかかってるみたいなんだけど、いまいち検証できていない。
こんなのも分からんのか！？と思った方はコメントくださーい。
あと、APIの意味違うぜーっていうのもコメントくださーい。
