如何将特定的数据从Google Apps脚本返回到html网页 [英] how to return specific data from a google apps script into html web page
问题描述
Code.gs
function doPost(e) {
var id = "SHEET_ID";
var sheetname = "verify";
var data = SpreadsheetApp.openById(id).getSheetByName(sheetname).getRange("A1:X100").getValues();
var ar = [];
data.forEach(function(f) {
if (~f.toString().indexOf(e.searchtext)) {
ar.push(f);
}
});
return ar;
}
www.mywebsite.com/index.html:
<html>
<body>
<form id="gform" method="POST" action="https://script.google.com/macros/s/SCRIPT_ID/exec" >
<input name="subject" id="subject" />
<input name="name" id="name" />
<input type="text" name="searchtext" id="searchtext" />
<input type="button" value="Login" id="login" onClick="getData();" />
</form>
<script>
function getData(ar) {
document.getElementById("name").value=ar[0][1];
document.getElementById("subject").value=ar[0][2];
}
</script>
</body>
</html>
工作表:
A | B | C
123 John Green
214 Julie Red
在此先感谢您的帮助
首先:如何将数据返回到我的网站页面.
First: how to return the data to my website page.
第二:我不想提交表格.我想获取数据并在同一页面中使用它们.
Second: i dont want to submit the form. i want to get the data and use them in the same page.
推荐答案
对于我所了解的，您想在提交表单时将一些值传递给服务器端(您的Apps脚本代码)(防止默认的提交表单行为) ).如果正确，请在HTML文件中使用以下代码.
For what I could understand you want to pass some values to your server side (your Apps Script code) when you submit a form (Preventing the default submitting form behavior). If that's correct, then use the following code in your HTML file.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="gform">
<input id="subject" />
<input id="name" />
<input type="text" id="searchtext"/>
<button>Submit form</button>
</form>
<script>
// Callback that runs when the valuesSubmitted function returned some values
function onSuccess(val){
console.log(val);
}
// Callback that runs when the form is submitted
function logSubmit(e){
// Get values from the inputs
var submittedVals = {
"subject": document.getElementById('subject').value,
"name": document.getElementById('name').value,
"searchtext": document.getElementById('searchtext').value
}
// Pass data to the server side
google.script.run.withSuccessHandler(onSuccess).valuesSubmitted(submittedVals);
e.preventDefault();
}
// Event listener for when the form is submitted
document.getElementById('gform').addEventListener('submit', logSubmit);
</script>
</body>
</html>
JavaScript代码中的关键概念是 Class google.script.run ，这是一个功能强大的工具，可让您在服务器端调用Apps脚本函数.使用 withSuccessHandler(function) ，您将可以等待让Apps脚本函数返回一个值，以便稍后运行带有获得的值的回调函数.
The key concept in the JavaScript code is the Class google.script.run, which is a powerful tool that allows you to call your Apps Script functions in the server-side. Using withSuccessHandler(function) you will be able to wait for an Apps Script function to return a value to run later a callback function with the gotten values.
注意: 我还使用.preventDefault()取消了表单的提交行为.
Notice: I also used .preventDefault() to cancel the form's submit behavior.
现在，在您的Apps脚本代码中，您将定义一个函数，该函数可以获取电子表格的值，以便将其传递给客户端:
Now, in your Apps Script code, you will have defined the function that can get the spreadsheet's values in order to pass them to your client-side:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
// Called using google.script.run
function valuesSubmitted(val){
// Values that came from the client side
Logger.log(val);
var ss = SpreadsheetApp.getActiveSpreadsheet()
var sheet = ss.getSheets()[0];
var data = sheet.getRange("Any range you want").getValues();
// Pass data to the client side
return data;
}
我没有完全按照您的代码进行操作，如果需要，请以我的帖子为指导，并在我们不同的代码部分进行修改.
I didn't do it exactly as in your code, Take my post as guidance and modify it in the parts of the code we have different if you want to.
这篇关于如何将特定的数据从Google Apps脚本返回到html网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
