Jquery Ajax 요청 파일 다운로드 작업 실패 원인 분석 및 해결 방법

7190 단어 jqueryajax청구 하 다.실패 하 다.
jQuery 는 정말 좋 은 경량급 JS 프레임 워 크 입 니 다.JS 응용 프로그램 을 신속하게 개발 하 는 데 도움 을 주 고 자바 스 크 립 트 코드 를 쓰 는 습관 을 어느 정도 바 꾸 었 습 니 다.
잔말 말고 바로 본론 으로 들 어가 자.우리 먼저 실패 의 원인 을 분석 해 보 자.
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();
2)a 탭 을 직접 사용 하여 파일 다운 로드 를 실현 할 수 있다.
다운로드 클릭
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;
}
프로그램 을 실행 합 니 다.결 과 는 그림 과 같 습 니 다.
Spring 프 록 시 팩 터 리 빈 기반 AOP 에이전트 만 들 기
Spring CGLlB 동적 에이전트 구현 프로 세 스 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage