极客观点
项目管理
HarmonyOS
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>native-formdata2</title>
</head>
<body>
<form name="test">
<p>名称: <input type="text" autocomplete="off" name="CustomerName" style="width: 300px" /></p>
<p>电话: <input type="text" autocomplete="off" name="CustomerTel" style="width: 300px" /></p>
<p><input id="btn" type="submit" value="提交" /></p>
</form>
<script>
var form = document.querySelector('form');
var btn = document.querySelector('input[type="submit"]');
// 注意这里是对form绑定submit事件，而不是submit按钮
// 如果用click事件，则应该是绑定在submit按钮上的
form.addEventListener('submit', function(e){
var data = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://10.10.10.10:3000');
xhr.send(data);
e.preventDefault();
})
</script>
</body>
</html>上面是我自己写的案例，简单说明一下'http://10.10.10.10:3000'服务器地址是我自己杜撰的，本来写这个案例是想验证form的post请求默认content-type是application/x-www-form-urlencoded，但是我运行上面的代码为什么默认是multipart/form-data
下面是我输入框都输入12时发送请求的头部信息
Request URL:http://10.10.10.10:3000/
Referrer Policy:no-referrer-when-downgrade
Request Headers
Provisional headers are shown
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryxzu3u4M23GW3UlGC
Origin:null
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Request Payload
------WebKitFormBoundaryxzu3u4M23GW3UlGC
Content-Disposition: form-data; name="CustomerName"
12
------WebKitFormBoundaryxzu3u4M23GW3UlGC
Content-Disposition: form-data; name="CustomerTel"
12
------WebKitFormBoundaryxzu3u4M23GW3UlGC--
这很正常，这是由于你提交的是FormData对象，不设置头的话XMLHttpRequest 会调用FormData接口，默认将你的请求头设置为multipart/form-data，相当于form表单提交设置form设置enctype="multipart/form-data",而表单默认post 提交是enctype="application/x-www-form-urlencoded"，这两个都是表单的MIME编码