使用 Google Apps Script 开发 Web 应用/数据到电子表格

基本要点

如果你从用户那里收集了一些数据（可能是来自一个input标签或其他地方），并且你想要将这些数据保存到你的电子表格中，那么你必须将它们发送到服务器端，即使你正在使用客户端来处理所有用户界面。

步骤如下：

从用户调整的 html 元素中获取数据
可能需要稍微修改数据（例如，修剪任何尾随或前导空格）
使用魔法酱：google.script.run!
处理来自服务器的任何响应

从输入获取数据

以下是一个简单的从 textarea 元素中获取数据的方法，当用户点击“发送”时执行：

<textarea id="mytextarea"></textarea>
<button type="button" onClick="grabtext()">send</button>

<script>
function grabtext(){
   var text = document.getElementById('mytextarea').value; // note you don't use innerHTML
   // here's where'd you do something with that text
   }

</script>

发送到服务器

一旦你有一些信息要发送到服务器，你必须以某种方式将其传送到那里。这就是神奇的 google.script.run 的用武之地！

基本上，你可以通过调用**服务器端**的函数来发送一些数据，该函数可以在那里执行一些操作，然后返回一些响应。

以下是一个基于上面示例的示例。我们获取用户输入的内容，并将它们添加到（附加的）电子表格中的工作表中

<textarea id="mytextarea"></textarea>
<button type="button" onClick="grabtext()">send</button>

<script>
function grabtext(){
   var text = document.getElementById('mytextarea').value; // note you don't use innerHTML
   google.script.run.addRowToSheet(text);
   }

</script>

同时在服务器端（因此在 code.gs 中，而不是添加到 main.html 的 javascript 中）

function addRowToSheet(s) { // you can call what's passed anything you want. You don't have to call it "text"
   var ss = SpreadsheetApp.getActive(); // grabs the associated spreadsheet
   var sheet = ss.getSheetByName("Sheet1");
   sheet.appendRow([s]); // appendRow needs an array like ["first column info", "second column info", ...] 
   }

从服务器接收回复

通常你会想从服务器那里收到一些回复。这就是 withSuccessHandler 的作用。基本上，你告诉 javascript 你想要运行的服务器函数**和**当有东西返回时应该运行的客户端函数。语法很奇怪，但它确实有效。

以下是一个增强了最后一个示例的示例，让用户知道数据已保存到电子表格中

<textarea id="mytextarea"></textarea>
<button type="button" onClick="grabtext()">send</button>
<div id="callthiswhateveryouwant"></div>

<script>
function grabtext(){
   var text = document.getElementById('mytextarea').value; // note you don't use innerHTML
   google.script.run.withSuccessHandler(dealWithIt).addRowToSheet(text);
   }
function dealWithIt(returnvalue){ // you can call the return value whatever you want. Often you'll see people calling it "e"
   document.getElementById('callthiswhateveryouwant').innerHTML="From the server: "+returnvalue;
   }

</script>

同时在服务器端（因此在 code.gs 中，而不是添加到 main.html 的 javascript 中）

function addRowToSheet(s) { // you can call what's passed anything you want. You don't have to call it "text"
   var ss = SpreadsheetApp.getActive(); // grabs the associated spreadsheet
   var sheet = ss.getSheetByName("Sheet1");
   sheet.appendRow([s]); // appendRow needs an array like ["first column info", "second column info", ...] 
   return "holy cow it worked!";
   }