JS实现下载的常用方案
如何使用JS实现异步下载吗?即:既能实现下载又不刷新页面。这时我们常常会想到使用ajax,但是由于ajax接受的response始终是字符串,因此并不能使用ajax来实现下载功能。
常见是新建下载的方法为
1,a标签
2,url跳转,
3,提交表单,
其中a标签体验好些,其他两个会打开一个新标签再下载再关闭新标签,整个过程让人感觉眼花缭乱,因此推荐使用a标签实现下载功能。
//使用表单下载
function commDownload(url, method, params) {
let formStr = `<form action="${url}" method="${method}" >`;
for(let [key, value] of Object.entries(params)) {
formStr += `<input type="text" name="${key}" value="${value}" />`;
}
formStr += "</form>";
$(formStr).appendTo("body").submit().remove();
} //使用url跳转下载
function commDownload2(url, params) {
url += "?";
for(let key in params) {
url += key + "=" + params[key] + "&";
}
url = url.substr(0, url.length - 1);
window.open(url);
} //使用a标签下载--推荐使用
function commDownload3(url, params) {
url += "?";
for(let key in params) {
url += key + "=" + params[key] + "&";
}
url = url.substr(0, url.length - 1);
$("<a href=" + url + " />")[0].click();
}
JS实现下载的常用方案的更多相关文章
- Scrapy——5 下载中间件常用函数、scrapy怎么对接selenium、常用的Setting内置设置有哪些
Scrapy——5 下载中间件常用的函数 Scrapy怎样对接selenium 常用的setting内置设置 对接selenium实战 (Downloader Middleware)下载中间件常用函数 ...
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊??????
php大力力 [028节] 如何下载js文件,网上一个*.js无法下载啊?????? safari也无法下载 迅雷也无法下载 是不是对方网站服务器的不让下载那个js目录的文件??? 只能调用js函数啊 ...
- Node.js的下载、安装、配置、Hello World、文档阅读
Node.js的下载.安装.配置.Hello World.文档阅读
- html和js,外部js 的下载执行顺序
当用户开始访问,首先下载html资源和外部js资源,在chrome中显示的是html先下载,然后下载外部js,外部js的下载顺序安引用顺序,但是下载到达情况则视情况而定,接着才是图片和其他资源,但是要 ...
- Node.js 种子下载器
Node.js 种子下载器 庆祝 2018 国庆,制作了一个 Node.js 的种子下载器.爬取页面,根据页面的链接,破解另外一个网站,下载种子文件.项目比较简单,爬取页面没有使用任何爬虫框架.项目源 ...
- PDF.js 分片下载的介绍2:分片下载demo
上一个章节,简要说了以下分片下载的几个特性.今天主要用示例说明一下pdf.js分片下载. 服务器环境: php7.2 nginx 1.14 ubuntu 18.04测试浏览器:谷歌浏览器 70.0.3 ...
- js经典试题之常用的方法
js经典试题之常用的方法 1.下面代码输出的值 let s = "bob" const replaced = s.replace('b', 'l') replaced === &q ...
- js页面跳转常用的几种方式(转)
js页面跳转常用的几种方式 转载 2010-11-25 作者: 我要评论 js实现页面跳转的几种方式,需要的朋友可以参考下. 第一种: 复制代码代码如下: <script langu ...
随机推荐
- IDEA 显示Run Dashboard窗口的2种方式
前言:在基于spring boot构建spring cloud微服务架构的时候,一般需要启动多个应用程序,在idea开发工具中,多个同时启动的应用可以在Run Dashboard运行仪表盘中得到更好的 ...
- 加密类型、数据加密解密过程以及CA创建
对称加密算法 对称加密:加密和解密使用同一个密钥 DES:Data Encryption Standard,56bits 3DES: AES:Advanced (, , 256bits) Blowfi ...
- requests-html模块(下)
render方法 我们先理一下关系requests和的作者是同一个人,pyppeteer是nodejs中puppeteer的非官方实现 requests-html调用的pyppeteer与浏览器进行交 ...
- [openssl][nginx] 使用openssl模拟ssl/tls客户端测试nginx stream
一 server的配置 nginx # cat conf/nginx.conf daemon off; events { debug_connection ; } stream { upstream ...
- Ubuntu 18.04 使用apt-get 华为源支持 arm64 鲲鹏处理器
网上搜的源,什么阿里云163等等的,都不支持arm64 执行以下代码,使用华为源 wget -O /etc/apt/sources.list https://repo.huaweicloud.com/ ...
- JS之try..catch...
try 测试代码块的错误. catch 语句处理错误. throw 创建并跑出错误. try { //在这里运行代码 抛出错误 }catch(err){ //在这里处理错误 } 实例: <p&g ...
- 结构型模式(六) 享元模式(Flyweight)
一.动机(Motivate) 在软件系统中,采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中,从而带来很高的运行时代价--主要指内存需求方面的代价.如何在避免大量细粒度对象问题的同时,让外 ...
- 1-html基本结构与编写规范
<!DOCTYPE html> <html> <!-- #前端开发系统化学习教程, #包括html.css.pc端及移动端布局技巧.javascript. #jquery ...
- pandas数据类型判断(三)数据判断
1.函数:空值判断 1)判断数值是否为空用 pd.isna,pd.isnull,np.isnan2)判断字符串是否为空用 pd.isna,pd.isnull:3)判断时间是否为空用 pd.isna,p ...
- js数值的添加与删除
js中数组元素的添加和删除 js中数组元素常用添加方法是直接添加.push方法以及unshift方法 删除方法则是delete.pop.shift 集修改方法为一身的则是splice 1.添加: (1 ...