jquery ajax下载文件前后端代码
时间: 2023-09-20 12:13:07 浏览: 41
以下是一个 jQuery AJAX 下载文件的前后端代码示例:
前端代码:
```javascript
$("#downloadBtn").click(function(){
$.ajax({
url: "/downloadFile",
type: "POST",
dataType: "json",
success: function(response){
if(response && response.success){
// 下载成功
var downloadUrl = response.data.downloadUrl;
window.location.href = downloadUrl;
} else {
// 下载失败
alert("下载失败!");
}
},
error: function(){
// 下载失败
alert("下载失败!");
}
});
});
```
后端代码(假设使用 Node.js + Express):
```javascript
const express = require('express');
const app = express();
const path = require('path');
app.post('/downloadFile', function(req, res){
// 假设这里生成了一个下载链接
const downloadUrl = "http://www.example.com/download/sample.pdf";
// 返回下载链接
res.json({
success: true,
data: {
downloadUrl: downloadUrl
}
});
});
// 下载文件的路由
app.get('/download', function(req, res){
const fileUrl = req.query.fileUrl;
const fileName = path.basename(fileUrl);
// 设置响应头,告诉浏览器下载文件
res.setHeader('Content-disposition', 'attachment; filename=' + fileName);
res.setHeader('Content-type', 'application/octet-stream');
// 发送文件流
const fileStream = request.get(fileUrl);
fileStream.pipe(res);
});
app.listen(3000, function(){
console.log('Server listening on port 3000.');
});
```
在这个示例中,前端通过 AJAX 发送一个 POST 请求到 `/downloadFile` 接口,后端返回一个带有下载链接的 JSON 对象。前端接收到这个 JSON 对象后,通过修改浏览器的 `window.location.href` 实现下载文件。后端还提供了一个 `/download` 接口,当浏览器请求这个接口时,后端会发送文件流给浏览器,实现文件下载。