javascript - xmlhttprequest responseText 返回空白

Question

我正在将我的表单数据发布到谷歌电子表格(它正在运行，但我无法收到回复)并试图返回已发送的值。电子表格有 3 个标题 - 名称、图像、结果。每当我发送表单数据时，我都可以在正确的标题下将值写入电子表格，我只是无法获得 responseText 或 statusText 或类似的东西。我将如何返回并控制台记录这些值？

[index.js]

var form = document.createElement('form'),
    node = document.createElement('input');
form.method = 'POST';
form.action = 'google apps script url';
form.style.display = 'none';

var params = {'name': name, 'image': image, 'result': result};

for (key in params)
{
  node.name = key;
  node.value = params[key];
  form.appendChild(node.cloneNode());
}

document.getElementById('formContainer').appendChild(form);
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('name=' + name + '&image=' + image + '&result=' + result);
console.log(xhr.responseText); //returns blank...same w/ status / statusText / etc
document.getElementById('formContainer').removeChild(form);

[谷歌应用脚​​本]

function doPost(e)
{
  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  var nextRow = sheet.getLastRow() + 1;

  var row = [];

  for (i in headers)
  {
    row.push(e.parameter[headers[i]]);
  }

  sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);

  return ContentService
    .createTextOutput(JSON.stringify({"result":"success", "row": nextRow, 'values': e.parameter}))
    .setMimeType(ContentService.MimeType.JSON);
}

Answer 1

您正在通过将 async 参数设置为 true 来发出异步请求 xhr.open(form.method, form.action, true); .这意味着代码不会等待网页的响应并继续到下一行，因此有一个空的 xhr.responseText

您将不得不使用 XMLHttpRequest.onload() function 来定义回调函数。这将在收到来自 Web 应用程序的响应时执行，如下所示

xhr.onload = function() {
           console.log(xhr.responseText);
        };

您的代码如下所示:

  xhr.open(method, action, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.onload = function() {
       console.log(xhr.responseText);
    };
  xhr.send('name=' + name + '&image=' + image + '&result=' + result);

可以找到有关异步和同步的更多详细信息here .

注意:同步调用已deprecated适用于最新版本的 Mozilla 和 Chrome。所以建议不要使用它们。