个人中心
gpt4 book ai didi

javascript - 如何使用 HtmlService 运行服务器端功能

转载 作者：行者123 更新时间：2023-11-30 12:59:03 25 4
gpt4 key购买 nike

我是编程新手，我正在尝试使用 Google-apps-script 通过 jQuery 连接几个按钮。我有一个电子表格和一个添加到它的菜单，从 HtmlService 打开一个对话框。

在对话框中我有两个按钮，一个关闭对话框另一个执行服务器功能，目前仅将“hello world 写入单元格 a1。“关闭”按钮工作正常，但“更新”似乎没有做任何事情。我不确定如何调试客户端。

<script>
  $(document).ready(function(){

      $("#update").click(function (){
        var params = {}
        params.url = $("#url").val()
        params.owner = $("#owner").val()
        params.type = type
        google.script.run.update(params);
      });

      $("#close").click(function(){
      // This one works. why not the "update" button???
        google.script.host.close()
      })

  })

 </script>
 <title>AJAXtabs.html</title>
  </head>
<body>
<div id="content">
  <table border="1">
    <tr>
      <th><?= type ?>URL</th>
      <td><input type="text" id="url" name="url"></td>
    </tr>
    <tr>
      <th>New Owner email</th>
      <td><input type="text" id="ownerEmail" name="ownerEmail"></td>
    </tr>
    <tr>
      <td colspan="2" id="buttonRow" ><button id="update" type="button" >Update</button><button id="close" type="button">Close</button></td>
    </tr>
  </table>
</div>
<div id="message">
</div>
</body>
</html>

Code.gs 摘录

function update(params){
      var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
      var row = sheet.getLastRow()
      var col = sheet.getLastColumn()
      sheet.getRange('a1').setValue('Hello world!!')
    }
    function onOpen() {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var menuEntries = [];
   // When the user clicks on "addMenuExample" then "Menu Entry 1", the function function1 is
   // executed.
   menuEntries.push({name: "Set file", functionName: "fileUi"});
  menuEntries.push(null); // line separator
  menuEntries.push({name: "Set Folder", functionName: "folderUi"});

  ss.addMenu("Setters", menuEntries);
}

   function fileUi(){
 var htmlApp = HtmlService.createTemplateFromFile('View template')
 htmlApp.type = 'File';

   SpreadsheetApp.getActiveSpreadsheet().show(htmlApp.evaluate().setHeight(300).setTitle('Chan ge Owner'));
 }

   function folderUi(){
 var htmlApp = HtmlService.createTemplateFromFile('View template')
  htmlApp.type = 'Folder'

   SpreadsheetApp.getActiveSpreadsheet().show(htmlApp.evaluate());
}

最佳答案

以下是您的 html 和 gs 文件的修改版本，其中两个按钮均有效。我认为唯一需要更改的是包含 jQuery 库。

调试

一般来说，调试客户端函数的最佳位置是在调试器/IDE 中，使用适合的技术。您可能会在 this tutorial 中找到一些对您有帮助的想法，以及这些答案:

为了支持调试，此脚本依赖于 Peter Herrmann 的 BetterLog library .您需要通过“资源 - 管理库...”将其添加到您的项目中。有了它，再加上下面包含的辅助函数，您将拥有一种有效的方法来记录客户端和服务器端函数的操作。 (因为您已经在使用电子表格，您可以登录它...该实用程序将创建一个新选项卡。)

BetterLog 的额外使用为您提供了一种跨多个平台或环境跟踪执行的方法，并且比内置的 Logger 具有更好的历史记录。此示例仅触及该实用程序功能的皮毛 - 但对于大多数用途来说已经足够了!

各种日志消息已留在原处，以供说明。

示例日志

2013-07-31 00:02:17:332 -0400 000128 INFO in ready
2013-07-31 00:02:17:419 -0400 000094 INFO In html script
2013-07-31 00:02:23:508 -0400 000178 INFO in update.click
2013-07-31 00:02:24:081 -0400 000163 INFO in update (server)
2013-07-31 00:02:24:104 -0400 000186 INFO {"url":"adsfasdfsad","owner":null,"type":null}
2013-07-31 00:02:24:166 -0400 000248 INFO done update (server)
2013-07-31 00:03:14:355 -0400 000248 INFO in close.click

代码.gs

Logger = BetterLog.useSpreadsheet('--Spreadsheet-ID--');

/**
 * Make BetterLogger available to client-side scripts, via
 * google.script.run.log(string).
 */
function log(string) {
  Logger.log(string);
}

function update(params){
  Logger.log('in update (server)');
  Logger.log(JSON.stringify(params));
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  var row = sheet.getLastRow()
  var col = sheet.getLastColumn()
  sheet.getRange('a1').setValue('Hello world!!')
  Logger.log('done update (server)');
}


function onOpen() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [];
  // When the user clicks on "addMenuExample" then "Menu Entry 1", the function function1 is
  // executed.
  menuEntries.push({
    name: "Set file",
    functionName: "fileUi"
  });
  menuEntries.push(null); // line separator
  menuEntries.push({
    name: "Set Folder",
    functionName: "folderUi"
  });

  ss.addMenu("Setters", menuEntries);
}

function fileUi() {
  var htmlApp = HtmlService.createTemplateFromFile('View template')
  htmlApp.type = 'File';
  var html = htmlApp.evaluate()
                    .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                    .setHeight(300)
                    .setTitle('Change Owner');
  SpreadsheetApp.getActiveSpreadsheet().show(html);
}

function folderUi() {
  var htmlApp = HtmlService.createTemplateFromFile('View template')
  htmlApp.type = 'Folder'
  var html = htmlApp.evaluate()
                    .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                    .setHeight(300)
                    .setTitle('Change Owner');
  SpreadsheetApp.getActiveSpreadsheet().show(html);
}

查看模板.html

这已根据 best practices 进行了重组，当然还包括日志消息。

<div id="content">
  <table border="1">
    <tr>
      <th><?= type ?>URL</th>
      <td><input type="text" id="url" name="url"></td>
    </tr>
    <tr>
      <th>New Owner email</th>
      <td><input type="text" id="ownerEmail" name="ownerEmail"></td>
    </tr>
    <tr>
      <td colspan="2" id="buttonRow" >
      <button id="update" type="button" >Update</button>
      <button id="close" type="button">Close</button>
      </td>
    </tr>
  </table>
</div>
<div id="message">
</div>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  google.script.run.log("In html script");
  $(document).ready(function(){
    google.script.run.log("in ready");

    $("#update").click(function (){
      google.script.run.log("in update.click");
      var params = {}
      params.url = $("#url").val()
      params.owner = $("#owner").val()
      params.type = type
      google.script.run.update(params);
    });

    $("#close").click(function(){
      google.script.run.log("in close.click");
      google.script.host.close()
    })
  })
</script>

关于javascript - 如何使用 HtmlService 运行服务器端功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17958298/

25 4 0
文章推荐： c# - asp.net Repeater - 获取对当前项目的引用
文章推荐： javascript - 使用 Date() 转换具有指定时区偏移量的时间戳；
文章推荐： javascript - 在 flot 图中显示一个值的时间
文章推荐： javascript - 使用 JavaScript 忽略 "a"、 "the"等的字符串搜索
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com