POST リクエスト経由で JSON データを送信するときに JavaScript/jQuery でバイナリ ファイルのレスポンスを処理する方法

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

サーバーからの情報を表示するなどのタスクで Web アプリケーションを使用する場合、多くの場合、次のことが必要になります。サーバーにデータを送信しますが、応答も受信します。ただし、これらの応答は単純なテキストや JSON ではなく、ダウンロード可能なファイルである場合があります。

問題: バイナリ ファイルの応答の処理

当面の問題は、JavaScript でバイナリ ファイルの応答を処理するという課題を引き起こします。 /jQuery。この問題は、サーバーが JSON データを含む POST リクエストに応答して、PDF、XLS、またはその他の形式などのダウンロード可能なファイルを返すときに発生します。

アプローチ 1: 非表示の Iframe を作成する

一般的なアプローチの 1 つは、HTML ドキュメント内に非表示の iframe 要素を作成することです。 iframe (インライン フレームの略) を使用すると、現在の Web ページ内に外部 Web ページを埋め込むことができます。 iframe の src 属性をサーバーから返された URL に設定すると、ブラウザーにファイルをダウンロードさせることができます。

このアプローチを示すコード スニペットは次のとおりです。

<code class="javascript">$.post('/create_binary_file.php', postData, function(retData) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute("src", retData.url);
  iframe.setAttribute("style", "display: none");
  document.body.appendChild(iframe);
});</code>

このコードでは、まず iframe 要素を作成し、そのソースをサーバーから返された URL (retData.url) に設定します。次に、iframe の表示スタイル プロパティを none に設定して iframe を非表示にし、ユーザー インターフェイスに表示されないようにします。最後に、HTML ドキュメントの本文に iframe を追加します。

アプローチ 2: ウィンドウの場所のリダイレクト

もう 1 つのオプションは、window.location を使用してブラウザをダウンロード可能なファイルの URL にリダイレクトすることです。 .href。この方法は、ユーザー エクスペリエンスに顕著な遅延や混乱が生じる可能性があるため、iframe アプローチよりも単純ですが、洗練度が劣ります。

<code class="javascript">success: function(json,status) {
    window.location.href = json.url;
}</code>

考慮事項

説明されている両方の方法には、それぞれ独自の点があります。メリットとデメリット。 iframe アプローチはより信頼性が高く、ダウンロード プロセスをより詳細に制御できます。ただし、これは面倒な場合があり、すべてのシナリオで機能するとは限りません。ウィンドウの位置をリダイレクトする方法はシンプルですが、信頼性が低く、ユーザー エクスペリエンスを混乱させる可能性があります。

最終的に、アプリケーションに最適なアプローチは、特定の要件と制約によって異なります。

以上がPOST リクエスト経由で JSON データを送信するときに JavaScript/jQuery でバイナリ ファイルのレスポンスを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。