Jquery Ajax 요청 파일 다운로드 작업 실패 원인 분석 및 해결 방법
잔말 말고 바로 본론 으로 들 어가 자.우리 먼저 실패 의 원인 을 분석 해 보 자.
1.실패 의 원인
그것 은 response 때 문 입 니 다.일반적으로 요청 브 라 우 저 는 서버 출력 response 를 처리 합 니 다.예 를 들 어 png 생 성,파일 다운로드 등 입 니 다.그러나 ajax 요청 은'문자 형'요청 일 뿐 입 니 다.즉,요청 한 내용 은 텍스트 형식 으로 저 장 됩 니 다.파일 의 다운 로드 는 바 이 너 리 형식 으로 이 루어 집 니 다.되 돌아 오 는 response 를 읽 을 수 있 지만 읽 을 뿐 실행 할 수 없습니다.하 얀 점 은 js 가 브 라 우 저의 다운로드 처리 체제 와 프로그램 을 호출 할 수 없다 는 것 입 니 다.
해결 방안
1)jquery 를 사용 하여 폼 을 만 들 고 파일 다운 로드 를 제출 할 수 있 습 니 다.
var form = $("<form>");
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");
form.attr("action",rootPath + "T_academic_essay/DownloadZipFile.do");
var input1 = $("<input>");
input1.attr("type","hidden");
input1.attr("name","strZipPath");
input1.attr("value",strZipPath);
$("body").append(form);
form.append(input1);
form.submit();
form.remove();다운로드 클릭
3)숨겨 진 iframe 이나 새 창 으로 해결 합 니 다.
PS:AJAX 요청$.ajax 방법 사용
jQuery 의$.ajax 방법 을 사용 하면 AJAX 요청 을 더욱 상세 하 게 제어 할 수 있 습 니 다.그것 은 AJAX 요청 에 세 립 도 등급 의 통 제 를 가 한다.
$.ajax 방법 문법
$.ajax(options)
매개 변수
options
(대상)대상 의 인 스 턴 스,그 속성 은 이 작업 의 인 자 를 정의 합 니 다.자세 한 내용 은 다음 표를 보십시오.
반환 값
XHR 인 스 턴 스
options 상세 범위 값
명칭.
유형
묘사 하 다.
url
문자열
요청 URL 주소
type
문자열
사용 할 HTTP 방법 입 니 다.보통 POST 나 GET 입 니 다.생략 하면 기본 값 은 GET
data
대상
하나의 대상,그 속성 은 조회 매개 변수 로 요청 을 전달 합 니 다.GET 요청 이 라면 데 이 터 를 검색 문자열 로 전달 합 니 다.POST 요청 이 라면,데 이 터 를 요청 체 로 전달 합 니 다.이 두 가지 상황 에서 모두$.ajax()유 틸 리 티 함수 로 값 을 처리 하 는 인 코딩 입 니 다.
dataType
문자열
되 돌아 오 는 데이터 에 응답 할 것 으로 예상 되 는 키 워드 를 표시 합 니 다.이 값 은 데 이 터 를 리 셋 함수 에 전달 하기 전에 어떤 후속 처 리 를 할 지 결정 합 니 다.유효 치 는 다음 과 같 습 니 다:
xml-응답 텍스트 는 XML 문서 로 해석 되 고 결과 로 XML DOM 은 리 셋 함수 에 전 달 됩 니 다.
html-응답 텍스트 는 처리 되 지 않 고 리 셋 함수 에 전 달 됩 니 다.HTML 세 션 에 있 는
json-응답 텍스트 는 JSON 문자열 로 값 을 구하 고 결과 의 대상 으로 리 셋 함수 에 전 달 됩 니 다.
jsonp-json 과 비슷 합 니 다.다른 점 은 원 격 스 크 립 트 지원(원 격 서버 지원 가정)입 니 다.
script-응답 텍스트 가 리 셋 함수 에 전 달 됩 니 다.모든 반전 함수 가 호출 되 기 전에 응답 은 하나 이상 의 자바 스 크 립 트 구문 으로 처 리 됩 니 다.
text-응답 텍스트 는 일반 텍스트 로 가정 되 었 습 니 다.서버 자원 은 적당 한 콘 텐 츠 형식 응답 레이 블 을 설정 합 니 다.이 속성 을 생략 하면 응답 텍스트 에 대해 어떠한 처리 나 값 을 구하 지 않 고 리 셋 함수 에 전 달 됩 니 다.
timeout
수치
Ajax 가 요청 한 시간 초과 값(밀리초)을 설정 합 니 다.시간 초과 가 만 료 되 기 전에 요청 이 완료 되 지 않 으 면 요청 을 중단 하고 오류 리 셋 함 수 를 호출 합 니 다(정의 되 었 다 면)
global
불 형
전역 함수 의 트리거 를 사용 하거나 사용 하지 않 습 니 다.이 함수 들 은 요소 에 추가 할 수 있 으 며,Ajax 가 호출 하 는 서로 다른 시간 이나 상태 에서 촉발 할 수 있 습 니 다.기본 값 전역 함수 트리거 사용
contentType
문자열
요청 에 지정 할 내용 형식 입 니 다.기본 값 은 application/x-ww-form-urlencoded(폼 제출 에 사용 되 는 기본 형식 과 같 음)입 니 다.
success
함수.
요청 한 응답 지시 가 성공 적 인 상태 코드 를 표시 하면 이 함수 가 호출 됩 니 다.응답 체 는 첫 번 째 매개 변수 로 이 함수 에 되 돌아 가 고 지정 한 dataType 속성 에 따라 진 행 됩 니 다.두 번 째 매개 변 수 는 상태 코드 를 포함 하 는 문자열 입 니 다.이 경우 영원히 성공 상태 코드 입 니 다.
error
함수.
요청 한 응답 이 오류 상태 코드 로 되 돌아 오 면 이 함수 가 호출 됩 니 다.세 개의 실제 인삼 이 이 함수 에 전 달 됩 니 다:XHR 인 스 턴 스,상태 메시지 문자열(이 경우 오류 상태 코드)과 XHR 인 스 턴 스 가 되 돌아 오 는 이상 대상(선택 가능)
complete
함수.
요청 이 완료 되 었 을 때 호출 되 었 습 니 다.두 개의 실제 인삼 이 전달 되 었 습 니 다:XHR 인 스 턴 스 와 상태 메시지 문자열(성공 상태 코드 나 오류 상태 코드).success 나 error 리 셋 함수 도 지정 하면 이 함 수 는 success 나 error 리 셋 함수 가 호출 된 후에 호출 됩 니 다.
beforeSend
함수.
요청 하기 전에 호출 되 었 습 니 다.이 함 수 는 XHR 인 스 턴 스 를 전달 하고 사용자 정의 헤더 를 설정 하거나 다른 사전 요청 작업 을 수행 할 수 있 습 니 다.
async
불 형
false 로 지정 하면 동기 화 요청 으로 요청 합 니 다.기본적으로 요청 은 비동기 입 니 다.
processData
불 형
false 로 설정 하면 전 달 된 데이터 가 URL 인 코딩 형식 으로 가공 되 는 것 을 막 습 니 다.기본적으로 데 이 터 는 URL 인 코딩 형식 으로 가 공 됩 니 다.(응용 프로그램/x-www-form-urlencoded 형식의 요청 에 적 용 됩 니 다.)
ifModified
불 형
true 로 설정 하면 지난 요청 이후 응답 내용 이 바 뀌 지 않 은 상태 에서 만 요청 이 성공 할 수 있 습 니 다.생략 하면 헤더 검 사 를 실행 하지 않 습 니 다.
다음 예 를 들 어 options 의 옵션 을 최대한 많이 사용 합 니 다.
클 라 이언 트 코드:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () {
$('#selectNum').change(function () {
var idValue = $(this).val();
var show = $('#show');
$.ajax({
url: 'Server.aspx',
type: 'POST',
data: { id: idValue },
//调小超时时间会引起异常
timeout: 3000,
//请求成功后触发
success: function (data) { show.append('success invoke!' + data+'<br/>'); },
//请求失败遇到异常触发
error: function (xhr, errorInfo, ex) { show.append('error invoke!errorInfo:' + errorInfo+'<br/>'); },
//完成请求后触发。即在success或error触发后触发
complete: function (xhr, status) { show.append('complete invoke! status:' + status+'<br/>'); },
//发送请求前触发
beforeSend: function (xhr) {
//可以设置自定义标头
xhr.setRequestHeader('Content-Type', 'application/xml;charset=utf-8');
show.append('beforeSend invoke!' +'<br/>');
},
//是否使用异步发送
async: true
})
});
})
</script>
</head>
<body>
<select id="selectNum">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="show"></div>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (Request["id"] != null && !string.IsNullOrEmpty(Request["id"].ToString()))
{
//启用该句会引发ajax超时异常
// System.Threading.Thread.Sleep(3000);
Response.Write(GetData(Request["id"].ToString()));
}
}
}
protected string GetData(string id)
{
string str = string.Empty;
switch (id)
{
case "1":
str += "This is Number 1";
break;
case "2":
str += "This is Number 2";
break;
case "3":
str += "This is Number 3";
break;
default:
str += "Warning Other Number!";
break;
}
return str;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
