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);
相关推荐
我命由我123453 小时前
VSCode - VSCode 转换英文字母的大小写
开发语言·javascript·ide·vscode·编辑器·html·软件工具
我命由我123453 小时前
VSCode - VSCode 让未被编辑的标签页不被自动关闭
前端·javascript·ide·vscode·编辑器·html·js
m0_679927207 小时前
练习小项目11:鼠标跟随小圆点
前端·javascript·css·html
GIS之路13 小时前
OpenLayers 获取地图状态
前端·javascript·html
断竿散人14 小时前
专题一、HTML5基础教程-http-equiv属性深度解析:网页的隐形控制中心
前端·html
敲代码的苦1314 小时前
HTML静态网页成品作业(HTML5、CSS3和JavaScript)——旅游网站网页(内包含1个页面)
前端·css·vue.js·前端框架·html·html5
onebyte8bits15 小时前
CSS Houdini 解锁前端动画的下一个时代!
前端·javascript·css·html·houdini
biomooc1 天前
R语言 | 如何使用R书写html文档?
r语言·html
魔都吴所谓1 天前
[前端]HTML模拟实现一个基于摄像头的手势识别交互页面
前端·html·交互
利刃大大1 天前
【在线五子棋对战】五、前端扫盲:html && css && javascript && ajax && jquery && websocket
前端·javascript·html