ajax请求不能下载文件(转载)

简介: 最近在做文件下载,后台写了个控制层,直接走进去应该就可以下载文件,各种文件图片,excel等但是起初老是下载失败,并且弹出下面的乱码:前台请求代码: [html] view plain copy $('#fileexcel').
最近在做文件下载,后台写了个控制层,直接走进去应该就可以下载文件,各种文件图片,excel等
但是起初老是下载失败,并且弹出下面的乱码:

前台请求代码:

 

[html]  view plain  copy
 
  1. $('#fileexcel').unbind('click').bind('click',function(){  
  2.                     alert("我要下载了");  
  3.                     $.ajax({  
  4.                         type:'post',  
  5.                         url:'media',  
  6.                         data:null,  
  7.                         async:true,  
  8.                         success : function(msg){  
  9.                             alert(msg);  
  10.                         }  
  11.                     })  
  12.                 })  

 

 

看起来貌似没有任何问题,但就不能下载。
本来认为是后台代码有问题,但是将网上的各种demo放进去还是有问题。
在坑了一天后,终于发现问题所在了。
那就是请求方式有问题,文件下载的请求是不能写在ajax里面的!
写成下面这样的就可以了:
[html]  view plain  copy
 
  1. <href="/media">点击下载Excel</a>  
  2. 或者  
  3. location.href = '/media';  

这次点击下载就出现如下理想效果。

 

 

然后总结一下为什么下载请求不能放在ajax里发送:
原因: 因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白点就是js无法调用到浏览器的下载处理机制和程序。

 

相关文章
|
6月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
59 2
|
6月前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
61 0
|
6月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
12天前
|
XML 前端开发 JavaScript
|
29天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
57 22
|
29天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
29天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
53 4
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
82 1
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
54 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
32 7
React技术栈-react使用的Ajax请求库用户搜索案例