如何通过 jQuery 和 Ajax 将 Google 表单数据发布到电子表格答案

【问题标题】：How to Post Google Forms Data via jQuery and Ajax to Spreadsheets如何通过 jQuery 和 Ajax 将 Google 表单数据发布到电子表格
【发布时间】：2015-05-29 20:07:30
【问题描述】：

我正在开发一个 Chrome 扩展程序，它本质上是一个简单的自定义 Google 表单，将发布到响应电子表格。我得到了以下函数来成功发送和填充数据一次，但再也不会：

function postFormToGoogle() {
    var timeOne = $("#time1hour").val();
    var timeTwo = $('#time2hour').val();
    var timeThree = $('#time3hour').val();

    $.ajax({
        url: "https://docs.google.com/forms/d/FORMKEY/formResponse",
        beforeSend: function (xhr) {
          xhr.setRequestHeader('Access-Control-Allow-Origin', 'chrome-extension://EXTENSION_ID');
          xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
        },
        data: { "entry_856586387": timeOne, 
        "entry_244812041": timeTwo, 
        "entry_2138937452": timeThree },
        type: "POST",
        dataType: "xml",
        xhrFields: {
            withCredentials: true
        },
        statusCode: {
            0: function () {
                document.getElementById("message").innerHTML = "Your form has been submitted!";
                window.location.replace("ThankYou.html");
            },
            200: function () {
                document.getElementById("message").innerHTML = "Your form has been submitted!";
                console.log("Success");
                window.location.replace("ThankYou.html");
            }
        }
    });
}

我必须包含 cors 请求标头，因为我收到了阻止我的请求的 No 'Access-Control-Allow-Origin' 警告。

作为一个扩展，我还在 manifest.json 文件中添加了以下权限：

"permissions": [
  "http://docs.google.com",
  "https://docs.google.com",
  "https://*.google.com",
]

目前，我不确定究竟是什么阻止了数据发布。可能的迹象可能是，在提交表单时，我收到“显示临时标头”警告，并且服务器响应等待 (TTFB) 时间的时间过长。

我的代码哪里出错了？（出于某种原因，它确实工作过一次。）是否有任何替代解决方案可以将自定义表单发布到电子表格？

【问题讨论】：

服务器返回的datatype 是什么？如果是html，则切换到dataType: "html",。
确实，来自服务器的响应头content-type是html。我相应地切换了“数据类型”，但数据仍然没有填充。不过，对于标头请求，我不再收到“显示临时标头”警告。
使用document.getElementById("message").innerText 代替document.getElementById("message").innerHTML：developer.chrome.com/extensions/xhr。您是否还在内容脚本中实现跨域 XHR？
原来我分享的代码一切正常。罪魁祸首实际上是 html 页面上的 input 值。首先，我应该指出，此表单使用 Google 表单上的“持续时间”选项，该表单具有小时、分钟和秒的下拉菜单。数字 0 - 9 选项具有单个数字值，而实际上要求所有值都是两位数（01,02 等）才能接受请求。感谢您的意见，gui47。

标签： javascript ajax forms google-chrome-extension google-sheets

【解决方案1】：

我就是这样做的...http://jsfiddle.net/adutu/7towwv55/1/ 你可以看到你收到了一个 CORS 错误，但它可以工作......数据到达了它应该在的地方

        function postToGoogle() {
            var field3 = $('#feed').val();

            $.ajax({
            url: "https://docs.google.com/forms/d/[key]/formResponse",
            data: {"entry.347455363": field3},
            type: "POST",
            dataType: "xml",
            statusCode: {
                0: function() {
                    //Success message
                },
                200: function() {
                    //Success Message
                }
            }
        });
        }

查看更多信息here

【讨论】：

CORS 在扩展中不会成为问题
我可以通过这种方式发送数据，但如果我在谷歌表单中有多个部分，那么如何发送下一部分的值？
这会将表单数据获取到我的响应电子表格中，但 CORS 会引发错误，因此我无法进行验证和成功行为。发帖成功和发帖不成功，状态码为0。