js发送post请求下载文件

大家都知道ajax是不能直接下载文件的,所以一般都是通过一个超链接的形式去下载一个文件

但是当牵扯到需要发送很多数据到服务器上再下载的时候超链接的形式就有些太过勉强了

如下是一个工具方法(依赖jquery) 可以通过发送多数据的情况下下载文件,代码如下:

/*===================下载文件
 * options:{
 * url:‘‘,  //下载地址
 * data:{name:value}, //要发送的数据
 * method:‘post‘
 * }
 */
var DownLoadFile = function (options) {
    var config = $.extend(true, { method: ‘post‘ }, options);
    var $iframe = $(‘<iframe id="down-file-iframe" />‘);
    var $form = $(‘<form target="down-file-iframe" method="‘ + config.method + ‘" />‘);
    $form.attr(‘action‘, config.url);
    for (var key in config.data) {
        $form.append(‘<input type="hidden" name="‘ + key + ‘" value="‘ + config.data[key] + ‘" />‘);
    }
    $iframe.append($form);
    $(document.body).append($iframe);
    $form[0].submit();
    $iframe.remove();
}

很简单的,传如url和数据就可以啦

demo: DownLoad({

url:‘http://www.baidu.com.....‘, //请求的url

data:{sc:‘xxx‘}//要发送的数据

});

时间: 2024-08-06 17:11:21

js发送post请求下载文件的相关文章

vue使用fetch.js发送post请求java后台无法获取参数值

问题:前台vue使用fetch.js发送post请求后,后台 request.getParameter()无法获取到参数值 思路:查阅后,原因为fetch中头文件Content-type这个Header为application/x-www-form-urlencoded导致request请求中的form data变成request payload 处理办法:后台controller中使用流接受数据后,在进行查询操作既可. vue代码 /** * 获取行业大类 */ export const ha

&lt;&lt;&lt; JS实现网页批量下载文件,支持PC/手机

//把下载链接放入集合里 var downloadData = new Array{"http://www.empli.com/data1.apk","http://www.empli.com/data1.apk","http://www.empli.com/data1.apk","http://www.empli.com/data1.apk"}; var downloadNum=0;//方法执行次数 circularWind

如何使用post请求下载文件

使用get请求下载文件非常简便,但是get请求的url有长度和大小的限制,所以当请求参数非常多时无法满足需求,所以改成post请求const res = await fetch('xxxxxxxxx', { method: 'post', body: JSON.stringify(params), credentials: 'include', headers: { 'Cache-Control': 'max-age=0', 'Pragma': 'no-cache', 'Content-Type

原生JS发送Ajax请求、JSONP

一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心技术当然是XMLHttpRequest对象: ajax请求过程:创建XMLHttpRequest对象.连接服务器.发送请求.接受相响应数据. 废话少说上代码! <script type="text/javascript"> //调用ajax函数 ajax({ url:'./Te

原生JS发送Ajax请求

注意了,划重点了,这一题考不到算我输! 一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心技术当然是XMLHttpRequest对象: ajax请求过程:创建XMLHttpRequest对象.连接服务器.发送请求.接受相应数据. 废话少说上代码! p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0p

js 发送ajax请求(XMLHttpRequest)

<!DOCTYPE html><html> <head> <title></title> <script type="text/javascript"> ajax({ url: "http://localhost:8080/save", type: "POST", data: {}, dataType: "json", username: 'sss', s

使用原生JS发送AJAX请求(XML,JSON解析)

mybutton.addEventListener('click', (e) => { let request = new XMLHttpRequest() request.onreadystatechange = () => { if(request.readyState === 4) { console.log('请求完毕') if(request.status >= 200 & request.status <= 300) { console.log('请求成功')

创建a标签使用get请求下载文件

let url = `${BaseUrl.path}/aa/bb/cc?no=${this.sqcode}&pae=${this.wlName}&ase=${this.setDate(this.data[0])}&eae=${this.setDate(this.data[1])}&esy=${this.empId}&aay=${this.sqName}`; const a = document.createElement('a') a.style.display =

nginx反向代理下载文件失败处理

最近遇到了客户在从我们的服务器下载文件失败时的情况.然后把解决方案一并整理一下以备后续.需要说明的是,我们前端都是使用nginx来做反向代理,后面的逻辑处理采用php的方式. 1.缓存目录不可写 nginx在做反向代理,代理后端的nginx+php-fpm时,在客户端下载文件时,总是下载到一定的大小,就下载不动,查看后端服务器,表现正常,在绕过前端反向代理,直接从后端下载,也正常.检查反向代理服务器日志,抛出如下异常: 2017/01/16 11:54:38 [warn] 3748#0: *61