AJAX 发布到谷歌电子表格答案

【问题标题】：AJAX post to google spreadsheetAJAX 发布到谷歌电子表格
【发布时间】：2012-04-03 19:26:51
【问题描述】：

我正在尝试将表单数据发布到 Google 电子表格。目前，如果表单经过验证，则会发生以下情况：

if (validateForm === true) {
        $.ajax({
            type: 'post',
            url: 'https://docs.google.com/spreadsheet/ccc?key=0AlwuDjMUxwhqdGp1WU1KQ0FoUGZpbFRuUDRzRkszc3c',
            data: $("#workPLZ").serialize(),
            success: alert($("#workPLZ").serialize())
        });
    }
    else {}

我使用成功设置来验证我的表单数据是否被正确序列化（它是）并且它是成功的。但是，我的谷歌电子表格没有更新（没有数据通过）。我在这里使用了示例代码，将 doGet 更改为 doPost (http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/)，并公开了 google 电子表格（任何人都可以编辑）。我按照说明，将代码复制到 googledocs，然后运行 setUp 两次（第一次请求许可，第二次运行它我没有注意到任何事情发生）。谁能帮我？我觉得我超级接近。

【问题讨论】：

通常会阻止跨站点脚本（即 ajax 发布到您当前所在域以外的域），虽然它会返回 200 代码，但它实际上会默默地失败。你确定不是这样吗？
我不知道——我对这一切还比较陌生。我该如何检查？
工作PLZ。我 99% 的时间感觉如何

标签： jquery ajax google-apps-script google-sheets

【解决方案1】：

好的，我想出了一个解决方案。在被告知跨域 AJAX 问题后，我决定继续使用http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/ 的文章作者使用的方法。

要将数据发布到您的 google 电子表格，首先制作电子表格并将工作表名称（左下角）更改为 DATA。接下来，在电子表格中打开脚本编辑器（工具 ==> 脚本编辑器）并粘贴文章中的脚本。将“doGet(e)”更改为“doPost(e)”。运行两次设置脚本。第一次它会请求运行权限（授予它），然后第二次选择运行它，你不会得到任何弹出指示它已经运行（我在编辑器中运行了我的，所以上面说“运行 setUp”代码输入区域，但仅此而已）。之后，在脚本编辑器中选择“发布”，然后选择“发布为服务”。单击“允许任何人调用此服务”单选按钮和“允许匿名访问”复选框。复制 URL（重要！）并单击“启用服务”。这是“困难的部分”。

在您的 HTML 表单中，您提交的每个元素都必须有一个“名称”属性（例如）这个名称是数据发送的方式 - 每个条目都附加到它的名称上。确保您收集的每条表单数据都有一个名称，并且该名称作为电子表格的一列输入（这就是它将数据从表单映射到电子表格的方式）。对于您的表单，将要发布的方法和操作设置为您的“发布为服务”URL（我告诉您保存），如下所示：

<form id="formID" method="post" action="URL" target="hidden_iframe">

我包含了一个表单 ID，因此我可以选择表单并使用 jquery 提交它。在您的 HTML 中，在上述表单之前，添加您隐藏的 iframe：

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>

设置某种形式的验证（不是必需的，但如果没有填写每个字段，您将在电子表格中得到不完整的数据），如果验证，则调用 jquery .submit()。例如：

    if (formValidation === true){
           $("#formID").submit();
    }
    else {}

就是这样。祝你好运！

【讨论】：

拼图的最后一部分是某种响应确认，此处使用 iframe 的onload() 进行了记录。这当然不是防弹的，但它是一个开始。 stackoverflow.com/questions/467008/…
非常感谢你的回答，你让我很开心！
@Stuart Nelson。没有发布为服务，而是部署为网络应用程序！我们应该选择那个吗？
这个答案已经超过 3 年了，我不知道目前的设置是什么样的。
@MansoorkhanCherupuzha 我可以看看您的用例的简化版本吗？我正在为stackoverflow.com/questions/43897395/… 工作，并且很乐意分享我最终开始工作的所有内容。

【解决方案2】：

由于 Google Apps 脚本现在有一个可以返回 JSON 响应的 ContentService，因此可以在不使用隐藏 iframe 的情况下发出 ajax 请求。作为原始解决方案的文章作者，我published an updated version of this technique which includes an ajax example

用户可能还想考虑切换到这个新版本，因为它利用了其他新的 Google Apps 脚本服务，特别是：

使用LockService防止并发写访问；和
切换到新的PropertiesService 来存储脚本数据

【讨论】：

您文章的链接已失效
服务器问题 - 应该回来
@mhawksey 你能帮忙吗？ stackoverflow.com/questions/33180172/… 我正在使用您的脚本，但在表单发布后尝试发送电子邮件。
@mhawksey：您的示例代码和答案应该准确地放在 Stackoverflow 上，以避免个人网站出现故障。

【解决方案3】：

我将向您展示在没有 AJAX 的情况下将数据发送到 Google 电子表格的简单方法，既没有 Google 表单，也没有 PHP……只有 Google 电子表格和 HTML，甚至是 Android。

创建一个新的 Google 电子表格。
打开工具/脚本编辑器

您只需要编辑器中的两个文件一个 HTML 和一个 Code.gs：

举个例子：

转到文件/新的 HTML 名称这个文件=Index.html：

<!DOCTYPE html>
<html>
<head>
<base target="_top">

<script>
function Enviar(){

var txt1=document.getElementById("txt1").value;
var txt2=document.getElementById("txt2").value;
var txt3=document.getElementById("txt3").value;
google.script.run.doSomething(txt1,txt2,txt3);
}
</script>
</head>

<body>
Prueba de Envio de informacion<br>
<input type="text" value="EMAIL" name="txt1" id="txt1"><br>
<input type="text" value="CEDULA" name="txt2" id="txt2"><br>
<input type="text" value="NOMBRE" name="txt3" id="txt3"><BR>
<Button name="btn1" onClick="Enviar();">Enviar</button>
</body>

</html>

要发送 3 个字段：EMAIL、CEDULA、NOMBRE

在同一个 ScriptEditor 中转到 de Code.gs 文件并输入：

function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function doSomething(s1,s2,s3){

Logger.log('datos:'+s1+"  "+s2+"  "+s3);
var enlace="https://docs.google.com/spreadsheets/d/
1XuAXmUeGz2Ffr11R8YZNihLE_HSck9Hf_mRtFSXjWGw/edit";
var ss = SpreadsheetApp.getActiveSpreadsheet();
var ss = SpreadsheetApp.openByUrl(enlace);
var sheet = ss.getSheets()[0];
sheet.appendRow([s1, s2, s3]);
Logger.log(ss.getName());
}

enlace 是电子表格的网址

发布为应用程序并获取新脚本的 url。现在您可以将此 url 用作嵌入到您的 HTML 应用程序或 android 应用程序中。就是这样。将要求用户获得打开此脚本的权限

【讨论】：