表单get提交,参数被重写

2018年09月25日Web前端

以前处理下载问题都是让浏览器插件去实现的 ,现在用纯前端方式去实现时,遇到了一个小坑。

一、问题描述

实现下载excel文件,js表单get提交,后端返回excel文件流给浏览器,实现excel的下载。现在由于要实现具体内容的下载,所以在url后增加参数控制下载的内容。

使用js动态生成form表单并提交,大概代码如下,

function downloadExcel(url) {
    var oForm = document.createElement('form');
    // 先添加到dom中
    document.body.appendChild(oForm);
    // 配置表单的数据
    oForm.method = 'GET';
    oForm.action = url;
    // 触发表单提交
    oForm.submit();
    // 移除该表单
    document.body.removeChild(oForm);
    oForm = null;
}

当url含有参数时,例如,aa.com?type=1这种时,控制台network里看submit时的url是aa.com?,问号之后的数据全部被“过滤”了。 最后发现,表单get提交的时候,会把表单内的带name的input的数据加到url上,实际原先的参数是被浏览器给删除了,又由于新建的form元素内无input或其他元素,所以看上去?后的数据都被剔除了。

注:html中的元素直接写action的方式也是一样的。

二、总结

可以改用post请求、ajax或者在form内增加input等标签的方式去处理。