通过在浏览器中运行的JavaScript将数据推送到Google电子表格

Mar*_*rov 18 javascript jsonp google-sheets cors google-spreadsheet-api

我正在开发一个Web应用程序,我希望允许用户将数据推送到自己的Google电子表格中.

首先,我尝试使用Google API Client Library for JavaScript,但它似乎不包括Spreadsheet API(https://developers.google.com/apis-explorer/#p/).

然后我决定直接使用Google Spreadsheets API 3.0版.我设法使用jQuery和检索用户的电子表格JSONP:

$.ajax({
  url: 'https://spreadsheets.google.com/feeds/spreadsheets/private/full?alt=json-in-script&access_token=' + access_token,
  dataType: 'JSONP',
  success: function(data){
    // use the spreadsheets
  }
});
Run Code Online (Sandbox Code Playgroud)

在同一方法中,我从用户选择的电子表格中检索工作表.然后我必须POST将数据发送到选定的表格.这就出现了问题:无法使用它JSONP.谷歌服务器似乎不支持CORS.我在浏览器中收到以下错误:

XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/... Origin ..mysite.. is not allowed by Access-Control-Allow-Origin.

感谢您查看这个.

nel*_*nic 29

带截图的分步说明

在阅读了Martin Hawskey精彩介绍(将数据从HTML表单发送到Google电子表格)并看到一些差距/假设之后,我们决定编写一份详细/全面的教程,其中包含一些人的分步说明发现有用:

https://github.com/dwyl/ HTML -form- 发送 -email-via- 谷歌脚本 -without服务器

该脚本会保存通过HTTP POSTGoogle电子表格发送的所有数据,并可选择将内容转发到电子邮件地址.(如果您希望收到有关新数据的通知,则非常有用)

HTML表格:

联系表

结果(表格中的行):

在表格中排

希望它能帮助别人.


dev*_*dev 22

我也在考虑这个问题大约8个月.我偶然发现了Martin Hawskey写的博客文章.我按照这里的指南,我能够设置HTML表单发布到电子表格.

实际上,您可以在电子表格中设置可以接收数据的已发布Web应用程序.要解决CORS问题,您需要在页面上定位隐藏的iframe.我会复制这篇文章中的代码,但有一点点.

DEMO

当我开始研究这个时,我会提供一些建议.如果你可以...尝试并设置一个你可以使用的PHP服务器.发布数据更加容易和灵活.我现在在工作中虔诚地使用Zend GData,并希望我早点找到它:)

编辑

Marting Hawskey对此进行了更新,以支持AJAX提交,而无需使用隐藏的iframe.看到这里.

  • 更新了此处引用的示例以允许真正的ajax提交,例如没有隐藏的iframe.见http://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/ (3认同)