如何通过jQuery和Ajax发布Google表单数据到电子表格 [英] How to Post Google Forms Data via jQuery and Ajax to Spreadsheets

问题描述

我正在研究Chrome扩展程序，它基本上是一个简单的自定义Google窗体，将发布到响应电子表格。

 函数postFormToGoogle（）{$ b $（）函数可以成功发送和填充数据一次， b 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}，
键入：POST，
 dataType：xml，
 xhrFields：{
 withCredentials：true 
}，
 statusCode：{
 0：函数（）{
 document.getElementById（message）。innerHTML =您的表单已被提交！; 
 window.location.replace（ThankYou.html）; 
}， 
 200：function（）{
 document.getElementById（message）。innerHTML =Your form ha已被提交！; 
 console.log（Success）; 
 window.location.replace（ThankYou.html）; 
} 
} 
}）; 
} 
  

我必须包含cors请求标题，因为我得到了一个N​​o'Access -Control-Allow-Origin'警告阻止了我的请求。

它是一个扩展，我还向manifest.json文件添加了以下权限：

 permissions：[
http://docs.google.com，
https：// docs.google.com，
https：//*.google.com，
] 
  

在这一点上，我不确定究竟是什么阻止了数据发布。可能的指标可能是，在提交表单时，我得到一个暂时标题显示的警告，并且服务器正在等待（TTFB）时间显示的响应时间太长。

我在代码中哪里出错？ （出于某种原因，它曾经工作过一次）。任何其他解决方案将定制表单发布到Spreadsheets？

是我做到这一点的方式...... 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（）{
 //成功消息
}，
 200：function（）{
 //成功消息
} 
} 
}）; 
} 
  

查看更多信息 here

I'm working on a Chrome extension that's essentially a simple custom Google Form that will post to a response Spreadsheet. I got the following function to successfully send and populate data only once, but never again:

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");
            }
        }
    });
}

I had to include the cors request headers because I was getting a No 'Access-Control-Allow-Origin' warning that blocked my request.

It being an extension, I also added the following permissions to the manifest.json file:

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

At this point, I'm not sure exactly what's preventing the data from posting. Possible indicators could be that when submitting the form I'm getting a "Provisional Headers are shown" caution and the server is taking way too long to respond as indicated by the Waiting (TTFB) time.

Where am I going wrong in the code? (It did work once, for some reason.) Any alternative solutions out there to post a custom form to Spreadsheets?

解决方案

This is the way I did it... http://jsfiddle.net/adutu/7towwv55/1/ You can see that you receive a CORS error but it works... the data gets where it should be

        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
                }
            }
        });
        }

See more info here

这篇关于如何通过jQuery和Ajax发布Google表单数据到电子表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！