首頁 >web前端 >js教程 >Jquery Ajax請求檔案下載操作失敗的原因分析及解決辦法

Jquery Ajax請求檔案下載操作失敗的原因分析及解決辦法

亚连原創: 2018-05-24 14:55:292303瀏覽

jQuery確實是個挺好的輕量級的JS框架，能幫助我們快速的開發JS應用，並且在一定程度上改變了我們寫JavaScript程式碼的習慣，本文重點介紹Jquery Ajax請求檔下載操作失敗的原因分析及解決辦法，對ajax請求失敗的原因分析感興趣的朋友一起學習把

jQuery確實是一個挺好的輕量級的JS框架，能幫助我們快速的開發JS應用，並且在某種程度上改變了我們寫JavaScript程式碼的習慣。

廢話少說，直接進入正題，我們先來分析一下失敗的原因

一、失敗的原因

那是因為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標籤實現檔案下載；

d9089546e1b92168403c0cff57c47696點擊下載5db79b134e9f6b82c0b36e0489ee08ed

3）使用隱藏iframe或新窗體解決。

PS：AJAX請求 $.ajax方法的使用

使用jQuery的$.ajax方法可以更為詳細的控制AJAX請求。它在AJAX請求上施加細粒度等級的控制。

$.ajax方法語法

$.ajax(options)
##參數
#options	(物件)一個物件的實例，其屬性定義這個操作的參數。詳情請見下表。
傳回值	#XHR實例

##############

options詳細範圍值

下面看个例子，尽可能多的用到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 () {
　　$(&#39;#selectNum&#39;).change(function () {
　　　　var idValue = $(this).val();
　　　　var show = $(&#39;#show&#39;);
　　　　$.ajax({
　　　　　　url: &#39;Server.aspx&#39;,
　　　　　　type: &#39;POST&#39;,
　　　　　　data: { id: idValue },
　　　　　　//调小超时时间会引起异常
　　　　　　timeout: 3000,
　　　　　　//请求成功后触发
　　　　　　success: function (data) { show.append(&#39;success invoke!&#39; + data+&#39;<br/>&#39;); },
　　　　　　//请求失败遇到异常触发
　　　　　　error: function (xhr, errorInfo, ex) { show.append(&#39;error invoke!errorInfo:&#39; + errorInfo+&#39;<br/>&#39;); },
　　　　　　//完成请求后触发。即在success或error触发后触发
　　　　　　complete: function (xhr, status) { show.append(&#39;complete invoke! status:&#39; + status+&#39;<br/>&#39;); },
　　　　　　//发送请求前触发
　　　　　　beforeSend: function (xhr) {
　　　　　　//可以设置自定义标头
　　　　　　xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;application/xml;charset=utf-8&#39;);
　　　　　　show.append(&#39;beforeSend invoke!&#39; +&#39;<br/>&#39;);
　　　　　　},
　　　　　　//是否使用异步发送
　　　　　　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;
}

运行程序，结果如图：

上面是我整理给大家的，希望今后会对大家有帮助。

jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法

基于h5的history改善ajax列表请求体验

简单谈谈AJAX核心对象

名稱	#類型	描述
url	#字串	請求的url位址
type	#字串	將要使用的HTTP方法。通常是POST或GET。如果省略，則預設為GET
data	物件	一個對象，其屬性作為查詢參數而傳遞請求。如果是GET請求，則把資料當作查詢字串傳遞；如果是POST請求，則把資料當作請求體傳遞。在這兩種情況下，都是由$.ajax()實用工具函數來處理值的編碼
dataType	字串	#一個關鍵字，用來識別預期將被回應所傳回的資料的類型。這個值決定再把資料傳遞給回呼函數之前(如果有)進行什麼後續處理。有效值如下： xml-回應文字被解析為XML文檔，而作為結果的XML DOM被傳遞給回調函數 html-回應文字未經處理就傳遞給回呼函數。在已傳回HTML片段內的任何3f1c4e4b6b16bbbd69b2ee476dc4f83a區塊將被求值 json-回應文字被求值為JSON字串，而作為結果的物件傳遞給回呼函數 #jsonp-與json相似，不同之處是提供遠端腳本支援(假定遠端伺服器支援) script-回應文字被傳遞給回調函數。在任何回呼函數被呼叫之前，回應會被當作一個或多個JavaScript語句而處理 text-回應文字被假定為普通文字。伺服器資源負責設定適當的內容類型回應標頭。如果省略這個屬性，則不對回應文字進行任何處理或求值就傳遞給回呼函數
timeout	數值	設定Ajax請求的逾時值(毫秒)。如果請求在逾時值到期之前仍未完成，則中止請求並且呼叫錯誤回呼函數(如果已定義)
#global	布林型	啟用或停用全域函數的觸發。這些函數可以附加到元素上，並且在Ajax呼叫的不同時刻或狀態下觸發。預設啟用全域函數觸發
contentType	字串	將要在請求上指定的內容類型。預設為application/x-www-form-urlencoded(與表單提交所使用的預設型別相同)
##success	#函數	如果請求的回應指示成功狀態碼，則這個函數被呼叫。響應體作為第一個參數被傳回給這個函數，並且根據指定的dataType屬性進行。第二個參數是包含狀態碼的字串—這種情況下永遠為成功狀態碼
#error	函數	如果請求的回應傳回錯誤狀態碼，則這個函數被呼叫。三個實參被傳遞給這個函數：XHR實例、狀態訊息字串(在這種情況下永遠為錯誤狀態碼)以及XHR實例所傳回的異常物件(可選)
#complete	函數	#要求完成時被呼叫。兩個實參被傳遞：XHR實例和狀態訊息字串(成功狀態碼或錯誤狀態碼)。如果也指定了success或error回呼函數，則這個函數在success或error回呼函數呼叫之後被呼叫
beforeSend	函數	在發起請求之前被呼叫。這個函數被傳遞XHR實例，並且可以用來設定自訂的標頭或執行其他預先請求操作
async	布林型	如果指定為false，則請求被提交為同步請求。在預設的情況下，請求是異步的
processData	布林型	##如果設定為false，則阻止已傳遞資料被加工為URL編碼格式。預設情況下，資料被加工為URL編碼格式(適用於類型為application/x-www-form-urlencoded的請求)
ifModified	布林型	如果設定為true，則自從上一次要求以來，只有在回應內容沒有改變的情況下(根據Last-Modified標頭)才允許請求成功。如果省略，則不執行標頭檢查

以上是Jquery Ajax請求檔案下載操作失敗的原因分析及解決辦法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery1.8版本使用ajax實作微信呼叫出現的問題分析及解決方法下一篇：jquery1.8版本使用ajax實作微信呼叫出現的問題分析及解決方法

看更多