ホームページ > ウェブフロントエンド > jsチュートリアル > ファイルのダウンロードに AJAX が機能しないのはなぜですか? 最適な代替手段は何ですか?

ファイルのダウンロードに AJAX が機能しないのはなぜですか? 最適な代替手段は何ですか?

Barbara Streisand
リリース: 2024-12-09 17:50:12
オリジナル
593 人が閲覧しました

Why Doesn't AJAX Work for File Downloads, and What's the Best Alternative?

AJAX リクエストによるファイルのダウンロード: 総合ガイド

問題: 「ajax ダウンロード リクエスト」を開始しようとしていますボタンをクリックしても期待した結果が得られません。 JavaScript と PHP のデモを以下に示します。

JavaScript:

var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();
ログイン後にコピー

PHP (download.php):

<?
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename= file.txt");
header("Content-Transfer-Encoding: binary");    
readfile("file.txt");
?>
ログイン後にコピー

上記のコードは期待どおりに機能しません。この問題を解決するために必要な手順について洞察を提供していただけますか?

解決策:

AJAX リクエストを介してファイルのダウンロードを開始することは実現できません。このタスクには、ファイルへの直接アクセスが必要です。

更新されたソリューション (2015 年 4 月 27 日):

「download」属性を使用:

  • HTML5 では「download」属性が導入されています。これは Firefox と Chrome でサポートされており、間もなく IE11 に含まれる予定です。同じオリジンでファイルを直接ダウンロードできます。

JavaScript:

// Check if 'download' is supported
if ('download' in HTMLAnchorElement.prototype) {
    // Create an anchor element
    var anchor = document.createElement('a');

    // Set 'download' attribute and file URL
    anchor.download = 'file.txt';
    anchor.href = 'download.php';

    // Trigger file download
    anchor.click();
} else {
    // Fallback to previous method
    window.location = 'download.php';
}
ログイン後にコピー

元の解決策:

使用する'window.location':

  • AJAX リクエストとは異なり、'window.location' はファイルに直接移動し、ダウンロードをトリガーします。

JavaScript :

$.ajax({
    url: 'download.php',
    type: 'POST',
    success: function() {
        window.location = 'download.php';
    }
});
ログイン後にコピー

簡単にするために、次のようになります。 AJAX リクエストを完全に回避し、単純に「window.location」を使用することをお勧めします。

以上がファイルのダウンロードに AJAX が機能しないのはなぜですか? 最適な代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート