Ajaxによるデータ送信
最近業務でajaxについて調べていたのですが、古い情報がわんさか出てきていろいろと惑わされ苦労したので、保存用にまとめておきます。
$('#export_btn').on('click', function(event){
// 通常のアクションをキャンセルする
event.preventDefault();
var import_data=new FormData(this);
import_data.append('filedata', $('input[type=file]')[0].files[0]);
import_data.append('filename', $('#filename').val());
$.ajax({
url: '/data/import_csv', // Formのアクションを取得して指定する
type: 'post', // Formのメソッドを取得して指定する
data: import_data,
contentType: false,
processData: false,
}).done(function (res) {
関数のイベントはクリックでもSUBMITでもどっちを指定してもいいです。buttonは何も指定していないと自動でSUBMITになるので、event.preventDefault();でSUBMIT処理を無効化しておかないと通信がうまくいきません。
・テキストデータを送るとき
// 通常のアクションをキャンセルする
event.preventDefault();
var $form= $('#export_form');
var query= $form.serialize();
var flag = 0;
var form2 = document.forms.export;
var start_date = toDate(form2.start.value, '/');
var end_date = toDate(form2.end.value, '/');
// 入力必須項目が入力されているかチェック、不適切な場合は各エラーコードとそれに対応したエラーメッセージを返す
//入力日時が出力日時よりもあとならばエラー2を返す
if (end_date.getTime() < start_date.getTime()) {
flag = 2;
}
//入力日時と出力日時が90日以上離れている場合はエラーログ3を返す
if (((end_date.getTime() - start_date.getTime()) / 86400000) >= 90) {
flag = 3;
}
//入力フォームに空欄がある場合はエラーログ1を返す
if (document.export.start.value == "") {
flag = 1;
}
if (document.export.end.value == "") {
flag = 1;
}
if (document.export.choise_pattern.value == "") {
flag = 1;
}
if (flag == 1) { // 入力必須項目に未入力があった場合
window.alert('必須項目は全て入力して下さい。'); // アラートを表示
return false; // 送信中止
}
if (flag == 2) { // 入力必須項目に未入力があった場合
window.alert('エクスポート期間の指定が不適切です。もう一度確認してください'); // アラートを表示
return false; // 送信中止
}
if (flag == 3) { // 入力必須項目に未入力があった場合
window.alert('エクスポート期間が90日以上になっています。'); // アラートを表示
return false; // 送信中止
} else { // 入力必須項目が全て入力済みだった場合
$.ajax({
url: '/data/export_csv', // Formのアクションを取得して指定する
type: 'get', // Formのメソッドを取得して指定する
data: $form.serializeArray(), // データにFormがserialzeした結果を入れる
}).done(function(response){
window.location.href = "/export_action?path="+response;
}).fail(function(){
console.log(query);
});}
});
</script>
テキストデータの送信
serialize()で直列化する必要があります。うまくいかないときはserializeArray()を試してみるのもありかもしれません
画像とかZIPを送るとき
ajaxで画像やファイル系のものをアップロードする通信を実装するにあたっての肝はFormDataをあらかじめ作ってあげる必要があるという点ですね。
テキストデータを送信する場合は必要ないのですが、ファイル形式のものをAJAXを通してアップロードするとなるとこのようにする必要があります。
AJAXでのファイル送信は基本的にこのFORMDATAにアップロードしたいファイルをappendしてオブジェクト方式で送信するという流れになります。
あとtypeはpostにしておかないとだめでGETではちゃんとデータが送れないので注意してください。そして、引数のcontentType: false,とprocessData: false,も忘れないでください。つけておかないと上手く送信できません。
サーバー側での受け取り方は普通の通信の時と同じです。（少なくともBottleとFLASKはそうでした）.done以降には通信に成功した際の処理を記述していきます。このコードだとresの部分にサーバー側からのレスポンスが帰ってきています。
ストリーミングでファイルをダウンロードする的な処理はできないので、AJAX通信でダウンロード用URLを返して、.done以降の処理でwindow.location.href =なんかでそのURLにアクセスして発火させるという感じの処理になります。
コメント