ファイルのダウンロードに AJAX が機能しないのはなぜですか? 最適な代替手段は何ですか?-jsチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-12-09 17:50:12

オリジナル

619 人が閲覧しました

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 サイトの他の関連記事を参照してください。