【Python】Bottleとajaxでデータのアップロード処理を実装する

この記事は約6分で読めます。

 

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にアクセスして発火させるという感じの処理になります。

 

 

コメント

タイトルとURLをコピーしました