form表单提交前设置请求头request header及文件下载

**需求:**想要在form表单submit之前,设置一下请求头。

除了用Ajax发起请求之外,还可以使用FormData来实现,咱不懂就问。

**1 问:**FormData什么时间出现的?与ajax什么联系?

**2 问:**FormData使用方法

参考示例:

html 复制代码
<form id="testForm">
    <input name="username" />
</form>

js:

javascript 复制代码
let data= new FormData(document.getElementById('testForm'));
let xhrObj = new XMLHttpRequest();
xhrObj.open('POST', url, true);
xhrObj.setRequestHeader('自定义请求头', '值');
xhrObj.onload = function () {
    if (xhrObj.readyState === 4 && xhrObj.status === 200) {
        console.log(xhrObj.responseText);
    } else {
        // 请求错误
    }
};
xhrObj.send(data);

如果请求是一个下载文件(二进制流)的url,除了需要额外设置下responseType之外,还需要添加模拟触发下载的代码:

javascript 复制代码
let data= new FormData(document.getElementById('testForm'));
let xhrObj = new XMLHttpRequest();
xhrObj.open('POST', downloadUrl, true);
xhrObj.setRequestHeader('自定义请求头', '值');
xhrObj.responseType = 'blob';
xhrObj.onload = function () {
    if (xhrObj.readyState === 4 && xhrObj.status === 200) {
		let content= xhrObj.getResponseHeader('Content-Disposition');
		let fileName = content.split(';')[1];
		fileName = decodeURI(fileName.split('=')[1]);
		let respObj= xhrObj.response;
		let downloadLink = document.createElement('a');
		downloadLink.href = URL.createObjectURL(respObj);
		downloadLink.download = fileName;
		downloadLink.click();
    } else {
        // 请求错误
    }
};
xhrObj.send(data);
相关推荐
Dxy12393102163 小时前
HTML中的Canvas入门:从零开始绘制图形世界
html
滑雪的企鹅.3 小时前
HTML头部元信息避坑指南大纲
前端·html
浔川python社5 小时前
HTML头部元信息避坑指南技术文章大纲
前端·html
路光.11 小时前
ReferenceError:Can‘t find variable:structureClone
前端·javascript·html·vue2
为美好的生活献上中指12 小时前
本地虚拟机部署redis集群
前端·redis·ubuntu·bootstrap·html·redis集群
Komorebi_999913 小时前
前端开发|18 个高频易错知识点汇总(HTML+CSS+JS+Vue)面试 & 开发通用
javascript·css·html
要不枉此行14 小时前
【Python 实战】一键爬取 HTML 文档并合并为完整 PDF
python·pdf·html
djk888816 小时前
html table 分组合并 与导出分组后的数据
前端·html
我命由我123451 天前
JavaScript 开发 - 获取函数名称、获取函数参数数量、获取函数参数名称
开发语言·前端·javascript·css·html·html5·js
爱上好庆祝1 天前
学习js的第四天
前端·css·学习·html·css3·js