没有jQuery的Ajax JavaScript发布到Google Spreadsheet

Question

我想在没有jQuery的情况下使用Ajax获得帮助，请在Google电子表格中发布数据信息。

就像在jQuery中一样，它非常简单，它是这样的：

var gformUrl = 'https://docs.google.com/forms/d/abcdefg1234567890/formResponse';

var gformData = {
    'entry.1405357202': 'text #1',
    'entry.2112718259': 'text #2',
    'entry.1657451952': 'text #3',
    'entry.737451165': 'text #4'
};

$.post(gformUrl,gformData);

现在，即使它在控制台中显示了一个无交叉原点的错误，它仍然可以正常工作。

我正在尝试不使用jQuery，而是使用纯JavaScript来执行此操作，但是目前还没有成功，这是我的代码：

var xhr = new XMLHttpRequest();
xhr.open('POST', gformUrl, true);
xhr.send(JSON.stringify(gformData));

Answer 1

$.post以URL编码格式而不是JSON发送数据。 这是param=val&param=val&...格式。

var formDataArray = [];
for (var key in gformData) {
    formDataArray.push(encodeURIComponent(key) + '=' + encodeURIComponent(gformData[key]));
}
xhr.send(formDataArray.join('&');

Answer 2

如果$.post()即使在出现Access-Control-Allow-Origin错误时$.post()工作，则罪魁祸首很可能是正在发送的数据类型。 根据有关CORS的MDN文章，使用POST进行的简单跨站点请求要求数据的内容类型为application / x-www-form-urlencoded，multipart / form-data或text / plain。

当前，您的XMLHttpRequest()发送内容类型为text/html JSON。 让我们修复它。

知道这一点之后，您可以通过将content-type请求标头设置为application/x-www-form-urlencoded并发送编码数据来尝试以下操作。

-编辑-更改了我以前的xhr.send(encodeURIComponent(JSON.stringify(gformData))); 为了避免使用数组，我做出了自己的选择来改进Barmar的解决方案。

var gformUrl = 'https://docs.google.com/forms/d/abcdefg1234567890/formResponse';

var gformData = {
    'entry.1405357202': 'text #1',
    'entry.2112718259': 'text #2',
    'entry.1657451952': 'text #3',
    'entry.737451165': 'text #4'
};

var xhr = new XMLHttpRequest();
xhr.open('POST', gformUrl, true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded; charset=UTF-8');

var formData = '';
for (var key in gformData) {
    formData += encodeURIComponent(key) + '=' + encodeURIComponent(gformData[key]) + '&';
}
xhr.send(formData.substr(0, formData.length-1));