Ajax($.post)を使用してのファイルダウンロードができません。

初めて質問させていただきます。

現在、PHP(7.4.1)、jQueryを勉強しており、Ajax通信をなかなか理解することができない中、
Excelファイルをダウンロードする処理をしたいのですが、うまくできません。

使用しているファイルは、以下のとおりです。
（全ファイル、同じディレクトリ内に収納しています。）

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <button id="btn">ダウンロード</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="index.js"></script>
</body>
</html>

index.js

$(function() {
  $('#btn').on('click', function() {
    $.post('_ajax.php')
    .done(function() {
      // 通信成功時の処理
    })
    .fail(function() {
      // 通信失敗時の処理
    });
  });
});

_ajax.php

<?php
$filepath = __DIR__ . '/sample.xlsx';
header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Length: ' . filesize($filepath));
header('Content-Disposition: attachment; filename="' . basename($filepath) . '"');
readfile($filepath);
exit;

上記の『_ajax.php』をURLにて直接指定すると、ファイルをダウンロードできるのですが、
`『index.php』からAjax($.post)を利用してダウンロードしようとすると、失敗します。

Chromeのデベロッパーツールで、NetworkタブのResponseを見ると文字化けしたものが表示されるので、
エンコードの問題？という気がするのですが、理解不足のため、解決方法がわかりません。

恐れ入りますが、ご教示いただけましたらありがたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

Ajaxはページを書き換えずにサーバからレスポンスを受け取る技術なので、ダウンロードさせる目的では使いません。（単純にform要素でPOSTすればよいです）

投稿2020/02/19 13:49

kei344

総合スコア69407

pisano

2020/02/19 13:57

kei344様早速のご回答ありがとうございます。ご教示いただきましたとおり、form要素にてPOSTすれば、ファイルダウンロードできること確認しました！ありがとうございます。ご存知でしたらお伺いしたいのですが、質問に記載させていただきましたAjax通信にて、ファイルダウンロードが失敗している原因は何なのでしょうか。お時間ありましたら、ご回答いただけましたら幸いです。