Question

我试图使用应用程序脚本让人们用html页面填充Google电子表格。但是在html页面上输入数据后，数据没有显示在目标电子表格中。

当我在code.gs上执行功能时没有问题。日志正常显示。而且，当我使用alert测试html上的脚本时没有问题。但是，当我尝试通过js将参数从html传递到code.gs时。不行

code.gs：

function doGet(event) {
  // Logger.log(event);
  return HtmlService.createHtmlOutputFromFile("page");
}

function GG(name, email, link) {    
  var url = "spreadsheet url";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");

  ws.appendRow([new Date(), name, email, link]);
  Logger.log("GG function is work")
}

function WTF() {
  Logger.log("WTF !!!");
}

page.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <base target="_top">
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="email">Name:</label>
          <input type="text" class="form-control" id="username">
        </div>

        <br>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="text" class="form-control" id="email">
        </div>
        <div class="form-group">
          <label for="link">Link:</label>
          <input type="url" class="form-control" id="link">
        </div>
        <button class="btn btn-primary" id="submit">Submit</button>
      </form>
    </div>

    <script>
      document.getElementById("submit").addEventListener("click",fn);

      function lol() {
        google.script.run.WTF();
      }

      function fn() {
        var uname = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var link = document.getElementById("link").value;

        google.script.run.GG(uname,email,link);
      }

    </script>
  </body>
</html>

当我更改document.getElementById("submit").addEventListener("click",fn);时，效果很好到document.getElementById("submit").addEventListener("click",lol);

日志按预期显示，但是GG无法正常工作。该工作表未按预期添加任何数据，除非我通过应用程序脚本页面上的“运行>运行功能> GG”执行该数据，否则它将在每个数据单元格上显示“未定义”。

Answer 1

已更新：

您的Submit事件处理程序与用于提交表单的默认浏览器操作发生冲突，因此调用了google.script.run.fn()，但是浏览器还移至另一个页面，然后您才能看到结果。如果您将事件参数添加到fn并调用e.preventDefault()，则至少将有机会看到调用google.script.run.fn()的效果。

  function fn(e) {
    e.preventDefault();

    var uname = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var link = document.getElementById("link").value;

    google.script.run
       .withSuccessHandler(function(){
         alert("success");
       })
       .withFailureHandler(function(e){
         alert("error:" + e);
       })
       .GG(uname,email,link);
  }

现在您应该看到一条错误消息，告诉您您无权打开电子表格。

您的GG（）函数不需要重新打开电子表格-它已与您的脚本关联：

function GG(name, email, link) {    
  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
  ws.appendRow([new Date(), name, email, link]);
  Logger.log("GG function is working:" + new Date());
}

Answer 2

我对您的代码进行了更深入的研究，我认为您正在错过像这样的表单作为Web应用程序的工作方式。您的GG函数正在尝试执行与使用POST方法提交表单并在您的code.gs中实现doPost方法相同的操作。

如果您使用method="POST" action="[your script url]"编写表单，并向每个控件添加name属性：

  <form method="post" action="[your script url]">
    <div class="form-group">
      <label for="email">Name:</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="text" class="form-control" id="email" name="email">
    </div>
    <div class="form-group">
      <label for="link">Link:</label>
      <input type="url" class="form-control" id="link" name="link">
    </div>
    <button class="btn btn-primary" id="submit">Submit</button>
  </form>

代码中的doPost（）方法。gs可能如下：

function doPost(e) {

  var name = e.parameter.username;
  var email = e.parameter.email;
  var link = e.parameter.link;

  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");  

  ws.appendRow([new Date(), name, email, link]);
  Logger.log("Event logged" + name + " " + email + " " + link);

  return HtmlService.createHtmlOutput("<h1>Thanks for submitting your information</h1>");
}

这将在数据表中追加一行并记录一条消息，您可以从脚本编辑器中查看该消息，这与这种支持电子表格的Web应用程序的工作方式保持一致。

将电子表格与应用脚本一起使用时，HTML脚本参数无法传递给应用脚本

2 个答案: