AJAX リクエストを使用して JavaScript/jQuery でダウンロード可能なファイルを処理する方法

JavaScript/jQuery で JSON データを使用して POST 経由でファイルをダウンロードする

シナリオ:

単一ページの Web アプリがあるとします。 AJAX 呼び出しを介して RESTful Web サービスと通信します。

• JSON データを含む POST リクエストを REST URL に送信します。
• リクエストで JSON レスポンスが指定されている場合は JSON を返します。
• ダウンロード可能なファイルを返します。リクエストがバイナリ応答 (PDF、XLS など) を指定している場合は、バイナリ ファイル。

問題:

クライアント JavaScript コードでダウンロード可能なファイルを処理する方法AJAX 呼び出しを使用する場合?

解決策:

提供されたコードは JSON 応答を正常に処理しますが、dataType の制限のため、AJAX 要求を使用してファイルを直接ダウンロードすることはできません。オプション。ただし、別のアプローチを採用することもできます。

方法 1: サーバー上でファイルを生成および保存する

• AJAX リクエストを作成してバイナリ ファイルを生成し、ファイルへの URL を含む JSON 応答。
• AJAX 成功ハンドラーで、window.location.href を使用してブラウザを URL にリダイレクトし、ファイルをダウンロードします。

長所:

• サーバーでの一元的なファイル管理

短所:

• 複数の AJAX が必要
• サーバー上の追加のファイル管理オーバーヘッド。

方法 2: Iframe の作成

• POST リクエストを実行するJSON データを含む /create_binary_file.php にコピーします。
• iframe を作成し、その src 属性を POST リクエストからの応答に設定します。これには、ダウンロード可能なファイルの URL が含まれることが期待されます。
• document.body.appendChild() または jQuery の $.body.append() を使用して iframe をページに追加します。

利点:

• ファイルをダウンロードする際のユーザー操作を促進します。
• サーバー上で追加のファイル管理は不要です。

短所:

• 変更が必要ですDOM。

考慮事項:

• 方法 1 では、より多くのサーバー オーバーヘッドが必要になりますが、より多くの制御とファイル管理が可能になります。
• 方法 2 は簡単ですが、DOM の変更が必要なため、複雑なページには適していない可能性があります。
• バイナリ ファイルのダウンロードを容易にするために、サーバーには適切な MIME タイプ設定が必要です。

以上がAJAX リクエストを使用して JavaScript/jQuery でダウンロード可能なファイルを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。