ファイルダウンロード機能のAjax実装を詳しく解説

今回は、Ajaxの実装ファイルダウンロード機能について詳しく説明します。Ajax実装におけるファイルダウンロード機能の注意点は何ですか?実際の事例を見てみましょう。

JQueryのajax関数の戻り値の型はxml、text、json、htmlなどの型のみで、「stream」型がないため、ajaxダウンロードを実装したい場合、対応するajax関数を使用してファイルをダウンロードすることはできません。 。ただし、js を使用してフォームを生成し、このフォームを使用してパラメーターを送信し、「ストリーム」タイプのデータを返すことができます。実装プロセス中、ページは更新されませんでした。

1. ajaxを使用すると、ajaxの戻り値の型はjson、text、html、xml型、またはajaxの送受信はstring

stringのみとなり、stream型にはできないと言えるので、ファイルのダウンロードは実行できません。無理に使用すると、応答の競合が発生します。 ajax を使用する必要がある場合は、生成されたファイル関連の URL を値を返すことによってのみ取得できます。次に、コールバック関数で iframe を作成し、その src 値をファイル URL、またはファイル生成ストリームの処理 URL に設定します。これにより、ページを更新せずにファイルをダウンロードできるようになります。

2. Ajax を使用せずに、DOM を動的に操作するか、iframe またはフォームを作成することで実現できます。iframe の src は、ファイルを直接ダウンロードするファイル アドレス URL になります。応答ストリーム出力を通じて処理 URL をダウンロードする形式は、DOM が動的に操作される場合に、ページを更新せずにファイルのダウンロードを実現します。 。ダウンロード中に

進行状況バーを実装するには、スケジュールされたタスクを作成し、一定の間隔でバックグラウンドにリクエストを送信し、セッションなどのパブリック オブジェクトを通じてファイルのダウンロードの進行状況を取得できます。

var title=$("input[name='gjzSelect']").val();
var rqTime = $(".ui-datepicker-time").val();
var ddd= rqTime.split("一");
var startTime=ddd[];
var endTime=ddd[];
var form = $("<form>"); //定义一个form表单
form.attr('style', 'display:none'); //在form表单中添加查询参数
form.attr('target', '');
form.attr('method', 'post');
form.attr('action', "<%=basePath%>jiankong/madeExcel.do");
var input = $('<input>');
input.attr('type', 'hidden');
input.attr('name', 'startTime');
input.attr('value', startTime);
var input = $('<input>');
input.attr('type', 'hidden');
input.attr('name', 'endTime');
input.attr('value', endTime);
var input = $('<input>');
input.attr('type', 'hidden');
input.attr('name', 'title');
input.attr('value', title);
$('body').append(form); //将表单放置在web中
form.append(input); //将查询参数控件提交到表单上
form.append(input);
form.append(input);
form.submit();
<%-- 
$.ajax({
url:'<%=basePath%>jiankong/madeExcel.do',
cache:false,
data:{
'startTime':startTime,
'endTime':endTime,
'title' :title
},
error:function (e){
alert("导出失败！");
},
success:function (data){
alert("导出成功！");
} 
}); 
--%>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jquery での ajax 実行順序の調整

Ajax インスタンスと $.ajax インスタンスの詳細な説明

jQuery が監視ページに対して ajax リクエストを行う方法

以上がファイルダウンロード機能のAjax実装を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。