XMLHttpRequest 发送元数据但不发送表单数据

Question

我有一个 XMLHttpRequest，我想用它从我的表单发送数据。这是我的代码：

var mc_xhr = new XMLHttpRequest();
mc_xhr.open(
  "POST",
  "https://webhook.site/58493d5a-9b8d-4300-875b-8f4d5ec6665b"
);
mc_xhr.setRequestHeader("Content-Type", "application/json");
mc_xhr.send(JSON.stringify("test-string"));

这实际上确实发送了一个带有元数据（如来源和引用者）的请求，但它不包含指定的文本字符串。

有人知道我需要做什么来发送带有请求的文本字符串吗？

Answer 1

如果您想向服务器发送 json，您应该为 xhr.send 方法提供有效的 json 结构，如下所示：

let xhr = new XMLHttpRequest();
let body= JSON.stringify({
  name: "Saeed",
  family: "Shamloo"
});
xhr.open("POST", '/targetURL')
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.send(body);

如果你想从一个表单中发送值，你可以使用内置的 FormData 对象。像这样：

<form name="person">
  <input name="name" value="Saeed">
  <input name="family" value="Shamloo">
</form>

<script>
  // pre-fill FormData from the form
  let formData = new FormData(document.forms.person);
  // add one more custom field
  formData.append("middle", "middle-name");
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "/targetURL");
  xhr.send(formData);
</script>

您可以检查浏览器网络开发者工具以确定哪些值已发送到服务器。

Answer 2

你也可以这样做。 xmlHttp 函数负责创建 XMLHttpRequest 对象，它可以在旧版浏览器中正常工作。第二个函数 fetchTask 是实际执行发送的函数。要使用它，只需提供您的表单对象作为参数。

function xmlHttp() {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!xhr) {
        console.log('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
}
    
// The function that takes the xmlHttp function, send your data and uses the response
function fetchTask(frmElement) {
        xmlHttp();
        xhr.onload = function() {
            const
                rsp = JSON.parse(xhr.responseText)
        }
        xhr.open(frmElement.method, frmElement.action, true)
        xhr.send(new FormData(frmElement))
        return false
    }

// Grab the form to be sent
taskForm = document.querySelector('#task-form')

// Do the actual sending
fetchTask(taskForm)

XMLHttpRequest 发送元数据但不发送表单数据

XMLHttpRequest sends meta data but no form data

javascript

xmlhttprequest