<
>
您的位置:主页 > 教程 > 网络编程 > AJAX相关 > 正文

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

2015-11-21 来源: 个评论 点击: 分享文章

A-A+

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方法语法

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 () {
  $('#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;
}

运行程序,结果如图:

收藏文章 推荐文章 文章纠错

作者:

编辑:admin

猜你喜欢:

参与评论