JS模拟Form表单下载视频和音频

1、最开始的采取的做法是window.open和window.location.href这两种形式请求后台下载文件的,前台代码:

 

        $BTN.click(function(){
              var videoUrl = $("#videoUrl").val();
              window.open(projectPath + '/downloadResource?url='+videoUrl );
})

 

  • 存在问题:

  当下载文件不存在时就会出现页面加载失败的情况。采用window.open这种方式就会打开一个新的窗口页面出现请求失败;采用window.location.href这种形式就会在当前页面直接跳转,然后显示页面加载失败的情况。

 

2、优化后通过form表单提交:

由于ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以通过ajax去请求该接口是无法下载文件的,所以我们创建一个新的form元素来请求接口。

/*js部分*/

$Btn.click(function(){
    var videoUrl = $("#videoUrl").val();
    var $eleForm = $("<form method='get'></form>");
$eleForm.attr("action",projectPath + '/downloadResource?');
// 隐藏域传递参数
$eleForm.append($("<input></input>").attr("type", "hidden").attr("name", "url").attr("value", videoUrl));

$(document.body).append($eleForm);

//提交表单,实现下载
$eleForm.submit().remove();
 });

参考网址:https://www.cnblogs.com/hamsterPP/p/6763458.html

     http://www.baikeyang.com/code/97427.html

posted @ 2018-12-25 17:49  Evaxtt  阅读(...)  评论(... 编辑 收藏