勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ

jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法

  jQuery JavaScript

jQueryのAjaxで何らかのデータをPHP側に送信し、PHP側で当該データをファイルに書き込んだ上でzipファイル化し、ブラウザからダウンロードさせたい。PHP経由でzipファイルダウンロードは以前に行ったが、さらにAjax経由というのは対応したことが無かったので以下にソースコード等をメモ。

 

対応方法

PHP側

PHP側については以前にメモした方法でzipファイルを出力させること。Ajaxから受信したデータは$_REQUEST等で取り扱うと良い。

Ajax側

【PHP側のURL】【Ajaxで送信したいデータ】【ダウンロードさせたいファイル名】部分は適宜変更すること。

$('#download').on('click', function(){
    $.ajax({
        type: 'post',
        url: '【PHP側のURL】',
        data: {【Ajaxで送信したいデータ】},
        xhrFields: { responseType: 'blob' }
    }).done(function (response, _textStatus, _jqXHR) {
        $('<a>', {
            href: URL.createObjectURL(new Blob([response], { type: response.type })),
            download: "【ダウンロードさせたいファイル名】",
        }).appendTo(document.body)[0].click();
    });

    return false;
});

 - jQuery JavaScript

  関連記事

jquery.cookie.jsで「$.cookie is not a function」エラー
jquery.cookie.jsで「$.cookie is not a function」エラー

フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

jQueryでチェックボックスの全チェック&チェック解除する方法
jQueryでチェックボックスの全チェック&チェック解除する方法

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法
フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法

お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...

formのtextareaに文字を入力した内容をリアルタイムプレビューする方法
formのtextareaに文字を入力した内容をリアルタイムプレビューする方法

textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。 ...