Question

我想获得使用ajax而不使用jQuery来帮助发布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

param=val&param=val&...以URL编码格式发送数据，而不是JSON。这是var formDataArray = []; for (var key in gformData) { formDataArray.push(encodeURIComponent(key) + '=' + encodeURIComponent(gformData[key])); } xhr.send(formDataArray.join('&');格式。

JSON.stringify()

Answer 2

如果$.post()即使出现Access-Control-Allow-Origin错误也正常工作，则罪魁祸首很可能是正在发送的数据类型。根据MDN关于CORS的文章，一个简单的跨站点请求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));

Ajax javascript在没有jQuery的情况下发布到Google Spreadsheet

2 个答案: