Ajaxでデータ送信する際、form情報を送信を送信したい場合があります。
数個程度ならFormデータの情報を１つずつ手で入れていくのもいいのですが、項目がかなりある場合や可変項目であると手打ちでは困難になります。
簡単に項目情報を入力できないかと探してみるとHTML5にFormDataクラスを用いて簡単にform内のデータをサーバに送信することができそうです。
jQueryのAjax機能で例を作ります。
[javascript] var form = $('#form1').get(0); var formData = new FormData(form); //Ajax $.ajax({ type: 'POST', async: false, // 同期通信 data:formData , url: '/test.php', dataType: 'text',//テキストとして受け取 success: function(json,text){ //処理成功時の動作 } }); [/javascript]しかし、FormDataはIE8及びIE9には対応していません。
IE8・IE9にも対応させる必要があるにはFormDataを使用せず、jQueryのSerializeArrayを使用することで似たような動作を行うことができます。
[javascript] var param; $(form.serializeArray()).each(function(i, v) { param[v.name] = v.value; }); //Ajax $.ajax({ type: 'POST', async: false, // 同期通信 data:param, url: '/test.php', dataType: 'text',//テキストとして受け取る success: function(json,text){ //処理成功時の動作 } }); [/javascript]