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);
相关推荐
rannn_1119 小时前
【Javaweb学习|黑马笔记|Day1】初识,入门网页,HTML-CSS|常见的标签和样式|标题排版和样式、正文排版和样式
css·后端·学习·html·javaweb
Tony小周2 天前
qml 实现数值键盘
前端·javascript·html
前端老鹰2 天前
HTML <link rel=“preload“>:提前加载关键资源的性能优化利器
前端·性能优化·html
白云~️2 天前
html img标签设置默认图片,防止图片路径不存在导致图片不展示影响页面美观
java·前端·html
xixixin_2 天前
【HTML】在页面中画一条0.5px的线
前端·css·uni-app·html·css3
羊锦磊2 天前
[ HTML 前端 ] 语法介绍和HBuilderX安装
java·开发语言·前端·html
chinahcp20082 天前
CSS保持元素宽高比,固定元素宽高比
前端·css·html·css3·html5
逆风优雅2 天前
vue实现模拟 ai 对话功能
前端·javascript·html
不羁。。2 天前
【web站点安全开发】任务3:网页开发的骨架HTML与美容术CSS
前端·css·html
前端Hardy3 天前
HTML&CSS:有趣的小铃铛
javascript·css·html