Jquery Ajax请求文件下载操作失败的原因分析及解决方案

JQuery确实是一个很好的轻量级JS框架，可以帮助我们快速开发JS应用，在一定程度上改变我们编写JavaScript代码的习惯。

废话少说，言归正传。我们先分析一下失败的原因。

一、失败的原因。

那是因为回应。一般来说，请求浏览器会处理服务器输出的响应，如生成png、下载文件等。然而，ajax请求只是一个“字符类型”的请求，也就是说，请求的内容是以文本类型存储的。该文件以二进制形式下载。虽然返回的响应可以读取，但它是只读的，不能执行。说白了，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/downloadzipile . do ')；var input 1=$(' input ')；input1.attr('type '，' hidden ')；input1.attr('name '，' strzipath ')；input1.attr('value '，strzipath)；$(“body”)。追加(表单)；form . append(input 1)；form . submit()；form . remove()；2)可以直接使用A标签下载文件；

A href="下载地址"单击下载/a。

3)使用隐藏的iframe或新形式来解决。

PS: Ajax请求$。Ajax方法的使用。

使用jQuery的$。ajax方法可以更详细地控制AJAX请求。它对AJAX请求施加了细粒度的控制。

$.ajax方法语法。

$.ajax(选项)

参数

选择

一个对象的实例，其属性定义了此操作的参数。详情见下表。

返回值

XHR实例

选项详细范围值。

名字

类型

形容

全球资源定位器(Uniform Resource Locator)

字符串

请求的Url地址。

类型

字符串

要使用的HTTP方法。通常是开机自检或获取。如果省略，默认为GET。

数据

目标

一个对象，其属性将请求作为查询参数传递。如果是GET请求，数据作为查询字符串传递；如果是POST请求，数据作为请求体传递。在这两种情况下，值的编码都由$处理。ajax()实用函数。

数据类型

字符串

用于标识响应预期返回的数据类型的关键字。该值决定了在将数据传递给回调函数之前执行什么后处理(如果有)。有效值如下：

xml响应文本被解析成一个XML文档，生成的XML DOM被传递给回调函数。

响应文本被传递给回调函数而不进行处理。将评估返回的HTML片段中的任何脚本块。

Json-响应文本被评估为Json字符串，结果对象被传递给回调函数。

Jsonp-类似于json，除了它提供远程脚本支持(假设远程服务器支持)。

脚本响应文本被传递给回调函数。在调用任何回调函数之前，响应将作为一个或多个JavaScript语句进行处理。

文本-响应文本被认为是正常文本。服务器资源负责设置适当的内容类型响应头。如果省略此属性，响应文本将传递给回调函数，而不进行任何处理或评估。

超时

数值

以毫秒为单位设置Ajax请求的超时值。如果请求在超时值到期前没有完成，请求将被中止，并调用一个错误回调函数(如果已定义)。

全球的

布尔型

或者启用或禁用全局功能的触发。这些函数可以附加到元素上，并在Ajax调用的不同时间或状态下触发。默认情况下，启用全局功能触发。

contentType

字符串

请求中指定的内容类型。默认值为application/x-www-form-URL encoded(与表单提交使用的默认类型相同)。

成功

功能

如果请求的响应指示成功状态代码，则调用该函数。响应体作为第一个参数返回给该函数，并根据指定的dataType属性执行。第二个参数是包含状态代码的字符串——在这种情况下，它总是成功状态代码。

错误

功能

如果请求的响应返回错误状态代码，则调用此函数。向该函数传递了三个参数：一个XHR实例、一个状态消息字符串(在这种情况下，总是一个错误状态代码)和一个由XHR实例返回的异常对象(可选)。

完成

功能

请求完成时调用。传递了两个参数：XHR实例和状态消息字符串(成功状态代码或错误状态代码)。如果还指定了成功或错误回调函数，则在调用成功或错误回调函数后调用该函数。

发送前

功能

在请求启动前调用。此函数被传递给XHR实例，可用于设置自定义头或执行其他预先请求的操作。

异步非同步(asynchronous)

布尔型

如果指定false，请求将作为同步请求提交。默认情况下，请求是异步的。

processData

布尔型

如果设置为false，将阻止将传输的数据处理为网址编码格式。默认情况下，数据被处理为URL编码格式(适用于application/x-www-form-URL encoded类型的请求)。

ifModified

布尔型

如果设置为true，则自上次请求以来，只有在响应内容没有更改(根据上次修改的标头)的情况下，才允许请求成功。如果省略，则不执行标题检查。

让我们举个例子，在选项中使用尽可能多的选项。

客户端代码：

html xmlns=' http://www . w3 . org/1999/XHTML ' head title/title script src=' http : script/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 '，data3360 {id3360idvalue}，//减少超时时间将导致异常超时33603000，//触发成功3360function (data) {show.append(。数据“br/”)；}，//请求失败。错误：函数(xhr，错误信息，ex) {show。追加('错误调用！error info : ' error info ' br/')；}，//请求完成后触发。即触发complete:函数(xhr，status){ show . append(' complete invoke！status : ' status ' br/')；}，//发送请求前触发beforesend:函数(xhr){//可以设置自定义头xhr . setrequest header(' content-type '，' application/XML；charset=utf-8 ')；show.append('beforeSend invoke！“br/”)；}，//是否使用异步发送async : true })})；})/script/head dyselect id=' selectnum ' option value=' 0 '-select-/option value=' 1 ' 1/option value=' 2 ' 2/option value=' 3 ' 3/option/selectdiv id=' show '/div/body/html server main。

受保护的void Page_Load(对象发送方，事件参数e){if(！页面。IsPostBack){if (Request['id']！=null！字符串。isnullrempty(请求['id']。tostring())){//启用这个句子会抛出一个ajax超时异常//system。threading . thread . sleep(3000)；回应。写入(获取数据(请求['id'])。ToString()))；} } }受保护的字符串GetData(字符串id){string str=string。空的；switch (id){case '1':str='这是1号'；打破；案例“2”: str=“这是2号”；打破；案例‘3’: str=‘这是3号’；打破；default:str=“警告其他号码！”；打破；}返回字符串；}运行程序，结果如图所示：