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);
相关推荐
刘 怼怼15 小时前
【520 特辑】用 HTML/CSS/JavaScript 打造浪漫炫酷的表白网页
javascript·css·html
哎呦你好15 小时前
CSS 选择器入门
开发语言·前端·css·html
一峰说18 小时前
power BI 倒计时+插件HTML Content,实现更新倒计时看板!
前端·html
患得患失94921 小时前
【HTML】【面试提问】HTML面试提问总结
前端·html
Liudef061 天前
基于HTML的Word风格编辑器实现:从零打造功能完备的富文本编辑器
编辑器·html·word
一块小砖头儿1 天前
HTML向四周扩散背景
前端·javascript·html
陳長生.1 天前
JAVA EE(进阶)_HTML
javascript·css·java-ee·html
杨超越luckly1 天前
HTML应用指南:利用POST请求获取全国申通快递服务网点位置信息
大数据·前端·信息可视化·数据分析·html
Allen Bright1 天前
【HTML-1】HTML骨架标签:构建网页的基础框架
前端·html
明长歌1 天前
HTML页面渲染过程
前端·html