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 ...
随机推荐
- Schema学习【一】
XML Schema 是基于 XML 的 DTD 替代者. 什么是 XML Schema? XML Schema 的作用是定义 XML 文档的合法构建模块,类似 DTD. XML Schema: 定义 ...
- java计算两个经纬度之间的距离
/** * 计算点 是否在一个固定点的半径范围内 * @2016年10月20日 * @param a 经度1 已知 * @param b 纬度1 已知 * @param x 经度2 * @param ...
- 【Python】编程小白的第一本python(最基本的魔法函数)
Python官网中各个函数介绍的链接:https://docs.python.org/3/library/functions.html 几个常见的词: def (即 define,定义)的含义是创建函 ...
- Django admin中文报错Incorrect string value 解决办法
- 超实用的JQuery小技巧
JQuery是一个 JavaScript 库,她极大的简化了我们对 JavaScript 的编程. 今天我们总结了下平常项目中用到的一些小技巧,仅供参考. 1.替换元素 //替换元素 $(docume ...
- Fzu-html1
Fzu-趣考网-前端1 html 题目: 使用html写出h1~h6六种格式的hello world 使用html的table标签制作一个表格,存储本学期专业课程(参考教务处课表) 使用html的sc ...
- composer 发布一个自己的扩展包
练习写了一个扩展包,步骤参考github项目的readme.md 文件.https://github.com/codingmonkey9/test 说明:只是自己简单记录一下,没有详细写. 如何发布具 ...
- 微信小程序 图片加载失败处理方法
微信小程序 官方文档对image 媒体组件加载失败 没有太多的解释,使用中出现了几个小问题,今天抽空记录一下 WXML: <image class="userinfo-avatar&q ...
- MongoDB 查看集合的统计信息
和 RDBMS 一样, MongoDB 同样存储集合的统计信息,通过调用命令 db.collection.stats() 可以方便的查看集合的统计信息. --1 查看集合 things 的统计信息 r ...
- Openwrt路由器上开发微信公众号应用
利用nohup命令创建启动服务 nohup, /dev/null 2>&1,输出重定向 http://www.cnblogs.com/taosim/articles/2610170.ht ...