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);
相关推荐
小小测试开发12 小时前
JMeter XPath2 Extractor用法全解析:精准提取XML/HTML响应数据
xml·jmeter·html
不会玩电脑的Xin.16 小时前
HTML + CSS
前端·css·html
能鈺CMS18 小时前
内容付费系统全面解析:构建知识变现体系的最强工具(2025 SEO 深度专题)
大数据·人工智能·html
全马必破三1 天前
HTML常考知识点
前端·html
雨白2 天前
电子书阅读器:解析 EPUB 底层原理与实战
android·html
lqz19932 天前
根据html导出excel和word
html·word·excel
小小测试开发2 天前
JMeter XPath提取器用法详解:XML/HTML响应数据提取神器
xml·jmeter·html
初学小白...2 天前
HTML知识点
前端·javascript·html
Eiceblue2 天前
通过 C# 将 HTML 转换为 RTF 富文本格式
开发语言·c#·html
_OP_CHEN3 天前
前端开发实战深度解析:(一)认识前端和 HTML 与开发环境的搭建
前端·vscode·html·web开发·前端开发