如何使用HtmlService运行服务器端函数
How do I run Server-side functions using HtmlService
我是编程新手,我正在尝试使用谷歌应用程序脚本将几个按钮与jQuery连接起来。我有一个电子表格和一个菜单添加到它打开一个对话框从HtmlService。
在对话框中,我有两个按钮,一个关闭对话框,另一个执行服务器功能,目前只写"hello world to cell 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中,使用适当的技术。你可能会在本教程中找到一些对你有帮助的想法,这些答案是:
- 在Google Apps脚本中逐步执行代码(相当于VBA-GAS)
- 如何在GAS中测试触发器功能
为了支持调试,此脚本依赖于Peter Herrmann的BetterLog库。你需要通过"资源-管理库…"将其添加到你的项目中。有了它,再加上下面包含的助手功能,你将有一种有效的方法来记录客户端和服务器端功能的操作。(由于您已经在使用电子表格,您可以登录它……该实用程序将创建一个新的选项卡。)
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);
}
查看template.html
这已经根据最佳实践进行了重组,当然还包括日志消息。
<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>
相关文章:
- Ajax没有给我服务器端函数调用
- 如何使用javascript代码调用服务器端函数;标记函数“>
- OrientDB:在服务器端函数中访问查询结果数据
- OrientDB Javascript 服务器端函数内的结果迭代
- 如何在 javascript 函数中调用服务器端函数
- 如何在 Node.js 中从客户端调用服务器端函数(例如.html单击按钮)
- 在 MVC3 中从客户端调用服务器端函数
- 从javascript asp.net调用服务器端函数
- 使用Javascript调用服务器端函数
- 使用隐藏按钮从JS调用服务器端函数
- 如何使用HtmlService运行服务器端函数
- 服务器端函数调用客户端Javascript函数以获取结果
- 如何从json调用服务器端函数
- 从客户端调用服务器端函数
- 如何防止使用javascript执行服务器端函数
- 如何从javascript调用服务器端函数
- 如何在ASP.Net中使用jQuery调用服务器端函数
- 如何在MVC中从javascript调用服务器端函数
- 服务器端函数在通过ajax访问时抛出php错误
- JavaScript对象-转换为JSON格式并传递给服务器端函数