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);
相关推荐
软件开发技术深度爱好者3 小时前
JavaScript的p5.js库使用介绍
javascript·html
lgliuying6 小时前
wangEditor5 富文本编辑器中使用 kityformula 公式编辑器的具体实践
前端·javascript·html
亚历山大海6 小时前
PHP HTML 实体(HTML Entities)没有被正确解码导致< 和 δ 等字符被转换
开发语言·html·php
zpjing~.~6 小时前
检查元素内部是否存在具有特定类名的子元素的方法
前端·javascript·html
曲幽7 小时前
FastAPI + SQLite:从基础CRUD到安全并发的实战指南
python·sqlite·fastapi·web·jwt·form·sqlalchemy·oauth2
大猫会长8 小时前
tailwindcss中,自定义多个背景渐变色
前端·html
松涛和鸣11 小时前
48、MQTT 3.1.1
linux·前端·网络·数据库·tcp/ip·html
汐泽学园11 小时前
基于Vue的家乡旅游美食信息网站设计与实现
javascript·vue.js·html·旅游·美食
白粥12 小时前
【HTML】文本格式化
前端·javascript·html
sheji341612 小时前
【开题答辩全过程】以 基于HTML5的移动端网页设计为例,包含答辩的问题和答案
前端·html·html5