如何根据请求发送 XMLHttpRequest？答案

【问题标题】：How to send an XMLHttpRequest based on a request?如何根据请求发送 XMLHttpRequest？
【发布时间】：2019-12-18 08:58:40
【问题描述】：

请求如下：

现在我想编写 javascript 来发送 XMLHttpRequest 以使用 POST 请求提交表单。我写的以下是不正确的。谁能在这里纠正我。

      <script type="text/javascript">
        window.addEventListener('load', function(e) {
            var x = new XMLHttpRequest();
            x.open("POST","www.something.com/vv",true);
            x.withCredentials = true;
            x.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            x.send(JSON.stringify({"email":"xxx@icloud.com", "password":"XXXX", "type": "icloud"})); 
        }, false);
    </script>

【问题讨论】：

为什么不使用fetch？
fetch 怎么做？
See here

标签： javascript post xmlhttprequest

【解决方案1】：

查看 Using the Fetch API 由 MDN 提供。对于 POST 请求，使用 FormData 可以很容易。

const formData = new FormData();
formData.append("email": "xxx.icloud.com");
formData.append("password": "XXXX");
formData.append("type": "icloud");
fetch("https://www.something.com/vv", {method: "POST", body: formData});

但是，将POST 与FormData 一起使用会将Content-Type 标头设置为multipart/form-data。如果您确实需要它是application/x-www-form-urlencoded，那么您应该手动设置内容类型标题和表单数据like in this example。

fetch("https://www.something.com/vv", {
  method: "POST", 
  body: JSON.stringify({...yourFormDataObject}), 
  headers: {"Content-Type": "application/x-www-form-urlencoded"}
});

fetch 拥有 93% 以上的支持，适用于所有现代浏览器，并且可以轻松地进行 polyfill。 https://caniuse.com/#feat=fetch

【讨论】：