>웹 프론트엔드 >JS 튜토리얼 >Ajax 파일 다운로드 기능 구현에 대한 자세한 설명

Ajax 파일 다운로드 기능 구현에 대한 자세한 설명

php中世界最好的语言
php中世界最好的语言원래의
2018-04-24 17:09:143797검색

이번에는 Ajax 구현 파일 다운로드 기능에 대해 자세히 설명하겠습니다. Ajax 파일 다운로드 기능 구현 시 주의 사항 은 무엇입니까?

JQuery의 ajax 함수의 반환 유형은 xml, text, json, html 및 기타 유형만 있고 "stream" 유형이 없으므로 ajax 다운로드를 구현하려면 해당 ajax 함수를 사용하여 파일을 다운로드할 수 없습니다. . 하지만 js를 사용하여 양식을 생성하고, 이 양식을 사용하여 매개변수를 제출하고, "스트림" 유형 데이터를 반환할 수 있습니다. 구현 프로세스 중에 페이지가 새로 고쳐지지 않았습니다.

1. ajax를 사용하면 ajax의 반환값 유형은 json, text, html, xml 유형이거나 ajax의 송수신은 stringstring만 가능하고 스트림 유형은 될 수 없다고 할 수 있으므로 파일 다운로드가 불가능합니다. 강제로 사용하면 응답 충돌이 발생합니다. Ajax를 사용해야 하는 경우에는 값을 반환해야만 생성된 파일 관련 URL을 얻을 수 있습니다. 그런 다음 콜백 함수에서 iframe을 생성하고 해당 src 값을 파일 URL 또는 파일 생성 스트림의 처리 URL로 설정하면 페이지를 새로 고치지 않고도 파일을 다운로드할 수 있습니다.

2. ajax를 사용하지 않고 DOM을 동적으로 운영하거나 iframe 또는 form을 생성하면 파일을 다운로드하는 동안 페이지가 새로 고쳐지지 않고 파일을 직접 다운로드할 수 있습니다. 또는 스트림일 수도 있습니다. 응답 스트림 출력을 통해 스트림 처리 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jquery에서 ajax 실행 순서 조정

Ajax 및 $.ajax 인스턴스에 대한 자세한 설명

jQuery가 모니터링 페이지에 대한 ajax 요청을 만드는 방법

위 내용은 Ajax 파일 다운로드 기능 구현에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.