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);
相关推荐
我狸才不是赔钱货10 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~10 小时前
前端三剑客之一 HTML~
前端·html
天天向上102418 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
charlie11451419121 小时前
HTML 理论系统笔记2
前端·笔记·学习·html·基础·1024程序员节·原生
www_stdio1 天前
从布局到动效:以水平垂直居中为基础、OOCSS 为架构、协同关键帧为灵魂的 CSS 动画实现(小球亲吻案例全解析)
css·html
一枚前端小能手2 天前
🌐 HTML DOM API全攻略(上篇)- 从基础操作到高级技巧的完整指南
前端·javascript·html
一枚前端小能手2 天前
🌐 HTML DOM API全攻略(下篇)- 高级接口与现代Web开发实践
前端·javascript·html
用户5223630776732 天前
告别Div地狱:现代HTML的语义化编程革命
html
雨过天晴而后无语2 天前
Windchill10+html使用Lightbox轻量化wizard的配置
java·前端·html
旺仔小拳头..2 天前
HTML——表单与表格
前端·html