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

來源:互聯網
上載者:User

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標籤實現檔案下載;

<a href=”下載地址”>點擊下載</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片段內的任何<script>塊將被求值

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標題)才允許請求成功。如果省略,則不執行標題檢查

下面看個例子,儘可能多的用到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;}

運行程式,結果如圖:

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.