【问题标题】:Run Google App Script from web page从网页运行 Google App 脚本
【发布时间】:2017-03-22 08:35:26
【问题描述】:

我知道如何编写一个简单的应用脚本(一旦发布)提供一个简单的表单(名称和消息),将值推送到 Google 电子表格中。

我的问题是:如何从我的站点运行脚本?我可以构建一个 html 表单并在提交表单时将其写入电子表格吗?

有没有办法“创建”一个包含必须在电子表格中推送的值的链接?

我在哪里可以找到示例?

谢谢

编辑

GS 代码

var logSheetId = "[SHEETID]"; // Drive ID of log spreadsheet

function doGet(e){
var nome;
var messaggio;

nome = e.parameter.stringaNome;
messaggio=e.parameter.stringaMessaggio;
scriviSpreadsheet(nome,messaggio);
}

function scriviSpreadsheet(nome, messaggio) {
try {

// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([nome, messaggio]);

// Return the new file Drive URL so it can be put in the web app output
//return file.getUrl();
} catch (error) {
return error.toString();
}
}

HTML(外部网站)

<form id="myForm">
<input type="text" id="nome" name="nome" placeholder="Il tuo nome"/>
<input type="text" id="messaggio" name="messaggio"/>
<input type="button" value="Submit"
  onclick="scrivi()" />
</form>

<script>
function scrivi(){
  var nome= document.getElementById("nome").value;
  var messaggio = document.getElementById("messaggio").value;

  var location = "https://script.google.com/macros/s/[MYSCRIPTID]/exec?stringaNome=" + nome + "&stringaMessaggio=" + messaggio;
  window.location = location;

}

function onFailure(error) {
    alert(error.message);
}
</script>

我知道这不是最好的代码,但它确实有效。

如何避免单击按钮时打开任何页面?

【问题讨论】:

  • 您可以编写 HTML 表单并将其嵌入到站点中,您可以使用 google 表单并通过 iframe 将其嵌入,或者您可以创建一个 google 站点并直接嵌入 GAS
  • 如果您的网页可以发出 HTTPS 请求,那么您可以触发一个 Apps 脚本函数,通过对 Apps 脚本项目的已发布 URL 的 GET 或 POST 请求运行。例如,如果您的网页可以使用 JavaScript,那么您可以发出 AJAX 请求。如果您的网页可以运行服务器端代码,那么您的网站服务器端代码可以向 Apps 脚本 URL 发出 GET 或 POST 请求。为了处理 GET 或 POST 请求,Apps Script 有两个保留的函数名称:doGet()doPost() 它们都监视对已发布 URL 的请求事件。
  • 将脚本发布为 Web 应用程序。然后你会得到一个链接,你可以单独使用它,在 iframe 中,或者直接进入谷歌站点页面。对于非 Google 站点,在 doGet(e) 函数中,您将调用 HtmlService.createTemplateFromFile('Index').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);HtmlService.createHtmlOutput('Index').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); 或其他调用之一。见developers.google.com/apps-script/reference/html/html-servicedevelopers.google.com/apps-script/reference/html/…
  • @SandyGood 我正在寻找 doGet 和 doPost 文档,但对我来说看起来很难......你能提供一个简单的例子吗? (不一定是我需要的完全相同的功能)我要格式化网址吗?
  • 如果您曾经使用 Apps 脚本创建过 Web 应用程序,那么您已经使用了 doGet() 函数并发布了它。在“发布”菜单中,单击“部署为 Web 应用程序”,会出现一个对话框。在顶部,有一个包含已发布 URL 的字段。那是您使用的 URL。有关详细信息,请参阅以下内容:Link to Stack Overflow answer

标签: javascript forms post google-apps-script web-applications


【解决方案1】:

编辑:经过测试并且有效。不要忘记部署为 Web 应用程序,授予表单访问权限以发布到脚本,并通过手动运行一次脚本来确保脚本可以访问目标工作表。

form.html:

<form action="https://script.google.com/macros/s/[SCRIPT ID]/exec" method="post">
  Input One:<br>
  <input type="text" name="inputOne"><br>
  Input Two:<br>
  <input type="text" name="inputTwo"><br>
  Input Three:<br>
  <input type="text" name="inputThree"><br>
  Input Four:<br>
  <input type="text" name="inputFour"><br>
  Input Five:<br>
  <input type="text" name="inputFive"><br>
  <input type="submit" value="Submit">
</form>

代码.gs:

function doPost(e) {

  var ss = SpreadsheetApp.openById("SHEET ID");
  var sheet = ss.getSheetByName("Sheet1");
  var sheet_counters = ss.getSheetByName("Counters");

  var id = sheet_counters.getRange("A2").getValue()+1;
  var timeZone = ss.getSpreadsheetTimeZone();
  var timestamp = Utilities.formatDate(new Date(), timeZone, "dd/MM/yyyy HH:mm:ss");

  sheet.appendRow([
    id,
    timestamp,
    e.parameter.inputOne,
    e.parameter.inputTwo,
    e.parameter.inputThree,
    e.parameter.inputFour,
    e.parameter.inputFive]);

  sheet_counters.getRange("A2").setValue(id);
}

【讨论】:

  • 我试过你的例子,当我尝试运行时说找不到 doGet 函数。我在“doGet”中重命名了函数“doPost”,当我运行时说无法从未定义(第 13 行)读取属性“内容”。
  • 现在脚本可以工作了!如果我不希望出现确认页面怎么办?当我提交表单时,我希望页面重定向到我的主页(或我网站上托管的其他页面)。再次感谢
  • 获取 doPost() 脚本以返回包含重定向的 HTMLService 页面。或者使用 jQuery.ajax() (api.jquery.com/jQuery.ajax) 处理原始帖子。此处给出的示例:stackoverflow.com/a/9933872/3520117 如果您觉得我已经回答了您的问题,请将其标记为正确答案。谢谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-18
  • 2017-04-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-10-18
相关资源
最近更新 更多