Jquery Ajax 요청 파일 다운로드 동작 실패 원인 분석 및 해결 방법
- 亚连원래의
- 2018-05-24 14:55:292273검색
jQuery는 실제로 JS 애플리케이션을 빠르게 개발하는 데 도움이 되는 매우 우수한 경량 JS 프레임워크이며 어느 정도 JavaScript 코드 작성 습관을 바꾸었습니다. 이 기사에서는 Jquery Ajax 요청 파일 다운로드 작업 실패를 소개하는 데 중점을 둡니다. 원인 분석 및 해결 방법, ajax 요청 실패 이유 분석에 관심 있는 친구들, 함께 배워보세요
jQuery는 실제로 JS 애플리케이션을 빠르게 개발하는 데 도움이 될 수 있는 아주 좋은 경량 JS 프레임워크이며, 어느 정도는 JavaScript 코드 작성 습관을 바꾸었습니다.
더 이상 헛소리하지 말고, 먼저 실패 이유를 분석해 보겠습니다.
1. 실패 이유
일반적으로 요청한 브라우저는 응답 출력을 처리합니다. png 생성, 파일 다운로드 등과 같은 서버에 의해 수행됩니다. 그러나 Ajax 요청은 "문자 유형" 요청일 뿐입니다. 즉, 요청된 콘텐츠는 텍스트 유형으로 저장됩니다. 파일 다운로드는 바이너리 형식입니다. 반환된 응답은 읽을 수 있지만 읽기만 가능하며 실행할 수 없습니다. 직설적으로 말하면 js는 브라우저의 다운로드 처리 메커니즘과 프로그램을 호출할 수 없습니다.
2. 솔루션
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 태그를 직접 사용하여 파일 다운로드를 구현할 수 있습니다. =”다운로드 주소”> 다운로드하려면 클릭하세요5db79b134e9f6b82c0b36e0489ee08ed
3) 숨겨진 iframe이나 새 양식을 사용하여 해결하세요.
PS: AJAX 요청 $.ajax 메서드 사용jQuery의 $.ajax 메서드를 사용하여 AJAX 요청을 더 자세히 제어할 수 있습니다. AJAX 요청을 세밀하게 제어할 수 있습니다.
$.ajax 메서드 구문
| (Object) 객체의 인스턴스, 해당 속성 이 작업에 대한 매개변수가 정의되어 있습니다. 자세한 내용은 아래 표를 참조하세요. | |||
| XHR 인스턴스 | |||
name |
type |
description |
|
url |
string | 요청한 URL 주소 |
|
type | String |
사용할 HTTP 메서드입니다. 일반적으로 POST 또는 GET입니다. 생략하면 기본값은 GET |
|
data |
Object |
요청에 쿼리 매개변수로 속성이 전달되는 객체입니다. GET 요청인 경우 데이터가 쿼리 문자열로 전달되고, POST 요청인 경우 데이터가 요청 본문으로 전달됩니다. 두 경우 모두 값 인코딩을 처리하는 것은 $.ajax() 유틸리티 함수입니다 |
|
dataType |
String |
응답에 반환될 것으로 예상되는 데이터 유형을 식별하는 데 사용되는 키워드입니다. 이 값은 데이터가 콜백 함수에 전달되기 전에 수행되는 후속 처리(있는 경우)를 결정합니다. 유효한 값은 다음과 같습니다. xml - 응답 텍스트가 XML 문서로 구문 분석되고 결과 XML DOM이 콜백 함수에 전달됩니다. html - 응답 텍스트가 처리되지 않은 상태로 콜백 함수에 전달됩니다. 반환된 HTML 조각 내의 모든 3f1c4e4b6b16bbbd69b2ee476dc4f83a 블록이 평가됩니다. json - 응답 텍스트가 JSON 문자열로 평가되고 결과 객체가 콜백 함수에 전달됩니다. jsonp - json과 유사하지만 차이점은 다음과 같습니다. 원격 스크립트 지원이 제공됩니다(원격 서버가 지원한다고 가정) script - 응답 텍스트가 콜백 함수에 전달됩니다. 콜백 함수가 호출되기 전에 응답은 하나 이상의 JavaScript 문으로 처리됩니다. text - 응답 텍스트는 일반 텍스트로 간주됩니다. 서버 리소스는 적절한 콘텐츠 유형 응답 헤더 설정을 담당합니다. 이 속성을 생략하면 응답 텍스트가 처리나 평가 없이 콜백 함수에 전달됩니다. |
|
timeout |
Value |
Ajax 요청에 대한 시간 초과 값(밀리초)을 설정합니다. 시간 초과 값이 만료되기 전에 요청이 완료되지 않으면 요청이 중단되고 오류 콜백 함수(정의된 경우)가 |
|
global |
Boolean |
호출됩니다. 기능. 이러한 함수는 요소에 연결될 수 있으며 Ajax 호출 중 다양한 시간이나 상태에서 트리거될 수 있습니다. 전역 함수 트리거링은 기본적으로 활성화되어 있습니다 |
|
contentType |
String |
요청에 지정할 콘텐츠 유형입니다. 기본값은 application/x-www-form-urlencoded입니다(양식 제출에 사용되는 것과 동일한 기본 유형) |
|
success |
Function |
이 함수는 요청에 대한 응답이 성공을 나타내는 경우에 사용됩니다. 상태 코드가 호출됩니다. 응답 본문은 첫 번째 매개변수로 이 함수에 반환되며 지정된 dataType 속성을 기반으로 합니다. 두 번째 매개변수는 상태 코드가 포함된 문자열입니다. 이 경우 항상 성공 상태 코드입니다. |
|
error |
Function |
요청에 대한 응답이 오류 상태 코드를 반환하는 경우 함수를 호출이라고 합니다. 이 함수에는 XHR 인스턴스, 상태 메시지 문자열(이 경우 항상 오류 상태 코드) 및 XHR 인스턴스에서 반환된 예외 개체(선택 사항)의 세 가지 인수가 전달됩니다. Function |
|
beforeSend |
함수 |
는 요청하기 전에 호출됩니다. 이 함수는 동기 요청에 전달됩니다. 기본적으로 요청은 비동기식입니다. |
|
processData |
Boolean |
false로 설정하면 전달된 데이터가 URL 인코딩 형식으로 처리되지 않습니다. 기본적으로 데이터는 URL 인코딩 형식으로 처리됩니다(application/x-www-form-urlencoded 유형의 요청에 적용 가능) |
|
ifModified |
Boolean |
true로 설정하면 마지막 요청 이후 응답 내용이 변경되지 않은 경우에만 요청이 성공할 수 있습니다(Last-Modified 헤더에 따라). 생략하면 헤더 검사가 수행되지 않습니다 |
|
|
下面看个例子，尽可能多的用到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>
<p id="show"></p>
</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;
}运行程序，结果如图：
上面是我整理给大家的，希望今后会对大家有帮助。 相关文章： |
위 내용은 Jquery Ajax 요청 파일 다운로드 동작 실패 원인 분석 및 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!