Google脚本：从输入表单中获取值 [英] Google Script: get values from input forms
本文介绍了Google脚本：从输入表单中获取值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用谷歌脚本实现了身份验证过程，但使用硬编码的数据为用户名和密码 code> payload 选项，当用户按下 Login 按钮时，我无法找到从html页面获取这些值的方法。 ..
有没有办法从输入字段获取这个值到有效载荷选项？
以下是我的代码：
HTML：
< body>
< form>
< fieldset class ='login'>
< div class =required>
< label for =email>电子邮件：< / label>
< input type =textname =emailid =emailclass =input-text/>
< / div>
< div class =required>
< label for =pass>密码：< / label>
< input type =passwordname =passid =passclass =input-password/>
< / div>
< / fieldset>
< input type =submitid =submit-btnvalue =Loginname ='Submit'class ='btn'/>
< / form>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"> ;</script>
< script>
$（'＃submit-btn'）。click（function（）{
google.script.run.login（）;
}）;
< / script>
< / body>
Google脚本：
SpreadsheetApp.getUi（）$ b $ .createMenu（'Menu'）
.addItem（'Show sidebar'，'showSidebar'）
.addToUi（）;
函数showSidebar（）{
var html = HtmlService.createHtmlOutputFromFile（'login'）
.setSandboxMode（HtmlService.SandboxMode.IFRAME）
.setTitle（'SDR Tag Governance'）
.setWidth（300）;
SpreadsheetApp.getUi（）
.showSidebar（html）;
函数login（）{
var endpoint ='login';
var url ='https://example.com/api/'+endpoint;
var payload = {
'username'：'email'，//在这里添加#email输入的值
'password'：'pass'//在这里添加#pass的值输入
}
var header = {
'Connection'：'keep-alive'，
'Content-Type'：'application / json; charset = utf-8'，
'Accept'：'application / json，text / plain，* / *'，
}
var options = {$ b $'method'：'post'，
'headers'：headers，
'payload'：JSON.stringify（payload），
};
var urlResponse = UrlFetchApp.fetch（url，options）;
Logger.log（urlResponse）;
}
我尝试将此代码添加到HTML页面：
< script>
$（'＃submit-btn'）。click（function（）{
google.script.run
.withSuccessHandler（function（response）{
return urlResponse; $ b $（$＃$ email）：$（'＃email'）。val（），
pass：$（'＃pass'）。val（）
}）;
}）;
< / script>
使用GS功能：
function login（email，pass）{
var endpoint ='login';
var url ='https://example.com/api/'+endpoint;
var payload = {
'username'：email，
'password'：pass
}
var header = {
'Connection'：'keep -alive'，
'Content-Type'：'application / json; charset = utf-8'，
'Accept'：'application / json，text / plain，* / *'，
'Cookie'：'...'，
}
var options = {$ b $'method'：'post'，
'headers'：headers，
'payload'：JSON.stringify（payload），
};
var urlResponse = UrlFetchApp.fetch（url，options）;
Logger.log（urlResponse）;
}
但它不起作用...
$ b $在您的原始HTML文件中，您不会将任何内容传递给.gs文件中的login（）函数。您可以使用jquery获取这些值。 < script>
$（'＃submit-btn'）。click（function（）{
google.script.run
.withSuccessHandler（function（response）{
//这是哪里你处理Code.gs
））
.withFailureHandler（function（error）{
console.log（error）;
}）
.login （{
email：$（'＃email'）。val（），
pass：$（'＃pass'）。val（）
}）;
}） ;
< / script>
编辑：gs文件中的登录函数
函数login（data）{
//我不认为你需要这个端点变量
var endpoint ='login';
var url ='https://example.com/api/'+endpoint;
//因为你传入了html中的一个对象，你可以
//访问数据的属性
var payload = {
'username'： data.email，
'password'：data.pass
}
//这与原来的
var headers = {
' Connection'：'keep-alive'，
'Content-Type'：'application / json; charset = utf-8'，
'Accept'：'application / json，text / plain，* / *'，
'Cookie'：'...'，
}
//你确定你需要JSON吗？
//尝试按照
的方式传递有效载荷对象var options = {$ b $'method'：'post'，
'headers'：headers，
'payload '：JSON.stringify（有效载荷），
};
var urlResponse = UrlFetchApp.fetch（url，options）;
// Logger.log告诉你什么会返回
//如果没问题，请将其更改为返回urlResponse;
//这将发送到您的HTML文件中的
//的withSuccessHandler。
Logger.log（urlResponse）;
}
I implemented an authentication process using google scripts but with hard-coded data for username and password values from payload option and I can't find a way to get these values from the html page when user presses the Login button...
Is there a way to get this values from input fields to payload option?
Here is my code:
HTML:
<body>
<form>
<fieldset class='login'>
<div class="required">
<label for="email">Email:</label>
<input type="text" name="email" id="email" class="input-text" />
</div>
<div class="required">
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" class="input-password" />
</div>
</fieldset>
<input type="submit" id="submit-btn" value="Login" name='Submit' class='btn'/>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('#submit-btn').click(function() {
google.script.run.login();
});
</script>
</body>
Google Script:
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Menu')
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('login')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('SDR Tag Governance')
.setWidth(300);
SpreadsheetApp.getUi()
.showSidebar(html);
}
function login(){
var endpoint = 'login';
var url = 'https://example.com/api/'+endpoint;
var payload = {
'username' : 'email', //Add here the value from #email input
'password' : 'pass' //Add here the value from #pass input
}
var headers = {
'Connection':'keep-alive',
'Content-Type':'application/json;charset=utf-8',
'Accept':'application/json, text/plain, */*',
}
var options = {
'method' : 'post',
'headers' : headers,
'payload': JSON.stringify(payload),
};
var urlResponse = UrlFetchApp.fetch(url, options);
Logger.log(urlResponse);
}
I tried to add this code to the HTML page:
<script>
$('#submit-btn').click(function() {
google.script.run
.withSuccessHandler(function(response) {
return urlResponse;
})
.login({
email: $('#email').val(),
pass: $('#pass').val()
});
});
</script>
With GS function:
function login(email,pass){
var endpoint = 'login';
var url = 'https://example.com/api/'+endpoint;
var payload = {
'username' : email,
'password' : pass
}
var headers = {
'Connection':'keep-alive',
'Content-Type':'application/json;charset=utf-8',
'Accept':'application/json, text/plain, */*',
'Cookie':'...',
}
var options = {
'method' : 'post',
'headers' : headers,
'payload': JSON.stringify(payload),
};
var urlResponse = UrlFetchApp.fetch(url, options);
Logger.log(urlResponse);
}
But it doesn't work...
解决方案
In your original HTML file you are not passing anything to the login() function in you .gs file. You can use jquery to grab those values.
<script>
$('#submit-btn').click(function() {
google.script.run
.withSuccessHandler(function(response) {
// this is where you handle the response from your Code.gs
})
.withFailureHandler(function(error) {
console.log(error);
})
.login({
email: $('#email').val(),
pass: $('#pass').val()
});
});
</script>
EDIT: login function in gs file
function login(data){
// i dont think you need this endpoint variable
var endpoint = 'login';
var url = 'https://example.com/api/'+endpoint;
// since you are passing in an object in the html, you can
// access the properties of data
var payload = {
'username': data.email,
'password': data.pass
}
// this is the same as your original
var headers = {
'Connection':'keep-alive',
'Content-Type':'application/json;charset=utf-8',
'Accept':'application/json, text/plain, */*',
'Cookie':'...',
}
// are you sure you need to JSON.stringify the payload?
// try just passing the payload object as is
var options = {
'method' : 'post',
'headers' : headers,
'payload': JSON.stringify(payload),
};
var urlResponse = UrlFetchApp.fetch(url, options);
// Logger.log shows you what comes back
// when that is fine change it to return urlResponse;
// this will then get sent to the withSuccessHandler that is
// in your HTML file.
Logger.log(urlResponse);
}
这篇关于Google脚本：从输入表单中获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
