Detailed explanation of Ajax implementation of file download function

This time I will bring you a detailed explanation of the Ajax implementation file download function, what are the precautions for Ajax implementation of the file download function, the following is a practical case, let's take a look.

The return types of JQuery's ajax function are only xml, text, json, html and other types, and there is no "stream" type, so if we want to implement ajax download, we cannot use the corresponding ajax function to download files. But you can use js to generate a form, use this form to submit parameters, and return "stream" type data. During the implementation process, the page was not refreshed.

1. Using ajax, the return value type of ajax is json, text, html, xml type, or it can be said that the sending and receiving of ajax can only be stringString, not stream type, so file downloading cannot be achieved, and response conflicts will occur if forced use. If you have to use ajax, you can only get the generated file-related URL by returning the value. Then in the Callback function, create an iframe and set its src value to the file URL, or a processing URL for the file generation stream, so that the file can be downloaded without refreshing the page.

2. Without using ajax, it can be realized through dynamic operation of DOM or creation of iframe and form. The page will not be refreshed while downloading the file. The src of the iframe can be the file address url to download the file directly. It can also be that the stream processing URL is downloaded through the response stream output. The form is that the stream processing URL is downloaded through the response stream output. When the DOM is dynamically operated, the file download is implemented without refreshing the page. To implement progress bar while downloading, you can create a scheduled task, send requests to the background at certain intervals, and obtain the progress of file downloading through public objects, such as session.

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("导出成功！");
} 
}); 
--%>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Adjustment of ajax execution order in jquery

Detailed explanation of Ajax and $.ajax instances

How jQuery makes ajax request for monitoring page

The above is the detailed content of Detailed explanation of Ajax implementation of file download function. For more information, please follow other related articles on the PHP Chinese website!