从Google Web App中的doPost()重定向，带有App脚本的HTML表单 [英] Redirecting from doPost() in Google Web App, HTML form with App script
问题描述
说我有一个带有各种输入的HTML文件.根据这些输入，我想发送电子邮件，然后显示谢谢"消息或重定向到谢谢"页面.
Say I have an HTML file with various inputs. According to these inputs I would like to send an email and then display a thank you message or redirect to a thank you page.
我正在如下所示在doGet()中加载index.html文件:
I am loading the index.html file in the doGet() as below:
function doGet(){
var template = HtmlService.createTemplateFromFile('index');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
在doPost(e)函数中添加了我所需的实现，将代码部署到Web应用程序中后，填写了表单并提交了，除了最后一点，一切似乎都可以正常工作.我想显示输出消息或重定向到谢谢"页面或类似的页面，但是我所看到的只是一个空白页面，该页面原本是HTML表单.
After adding the implementation which I require in doPost(e) function, deploying the code into a web app, filling in the form and submitting, everything seems to be working perfectly apart from the last bit. I want to show an output message or redirect to a thank you page, or something of the sort, but all I am seeing is a blank page, where there would have been the HTML form.
我尝试过:
function doPost(e) {
//all logic
return ContentService.createTextOutput("Thank you");
}
还有..
function doPost(e) {
//all logic
return ContentService.createTextOutput(JSON.stringify(e.parameter));
}
还有..
function doPost(e) {
//all logic
var htmlBody = "<h1>Thank you.</h1>";
return HtmlService.createHtmlOutput(htmlBody);
}
还有..
function doPost(e) {
//all logic
var template = HtmlService.createTemplateFromFile('Thanks');
return template.evaluate();
}
在所有列出的情况下，HTML表单似乎都消失了，我只能看到空白屏幕.
In all the listed cases the HTML form simply seems to disappear and I can only see a blank screen.
有什么想法吗?
推荐答案
在GAS中，通过网络应用发送POST请求并不像看起来那样简单.继续尝试一个小实验:将以下JS代码添加到由doGet()函数提供服务的HTML页面中，紧接在< body>标记之前:
In GAS, sending a POST request via web app is not as simple as it seems. Go ahead and try a little experiment: add the following JS code to the HTML page served by the doGet() function just before the closing <body> tag:
...
<script>
console.log(window.location);
</script>
</body>
在控制台中检查输出时，您可能会得到类似以下内容的信息:
When inspecting the output in the console, you'll likely get something like:
问题在于，以'/exec'结尾的Web应用程序URL实际上未链接至自身. Ratner， googleusercontent.com 链接是打开链接和表单时将重定向到的URL.但是，为了使表单提交工作，应该将POST请求发送到Web应用程序的已发布" URL(以"/exec"结尾的URL).
The issue is that the web app URL ending with '/exec' doesn't actually link to self. Ratner, the googleusercontent.com link is the URL you'll be redirected to when opening links and forms. However, in order to get the form submit to work, the POST request should be sent to the "published" URL of your web app (the one ending with '/exec').
因此，您必须通过实现自己的路由来覆盖默认值.有多种方法可以达到此结果-这是最简单的方法:
You must therefore override the defaults by implementing your own routing. There are many ways to achieve this result - here's the easiest one:
<form method="post" action="<?!= ScriptApp.getService().getUrl() ?>">
<input type="submit" value="submit">
</form>
If the <?!= ?> notation looks unfamiliar to you, please check the section on scriptlets and HTML templates in GAS https://developers.google.com/apps-script/guides/html/templates
基本上，发生的情况是在将原始HTML发送到浏览器进行呈现之前，将Web应用程序URL强制打印到模板上.这样可以确保在发生提交"事件时您将点击正确的URL.
Basically, what happens is that the web app URL is force-printed to the template before raw HTML is sent to your browser for rendering. This makes sure you'll hit the correct URL when 'submit' event occurs.
这篇关于从Google Web App中的doPost()重定向，带有App脚本的HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
