如何在 html 表单提交上运行服务器端功能

Question

我创建了一个 html 表单，允许用户将他们的电子邮件提交到电子表格选项卡“电子邮件”

在电子表格中，我创建了另一个选项卡“排序电子邮件”，以相反的顺序对“电子邮件”选项卡的结果进行排序，因此当人们提交他们的电子邮件时，我在排序电子邮件 B2 中有新提交的电子邮件。

问题是：现在我试图在提交时自动向新提交的电子邮件发送电子邮件，即一旦新用户提交表单，脚本就会向用户的电子邮件发送一封电子邮件，该电子邮件应该位于排序电子邮件 B2 中。 请任何帮助。 提前致谢！

请注意，当我从工作表脚本编辑器手动运行 SendEmail 函数时，它可以完成工作，但我的问题是关于在表单提交时自动运行该函数

我没有太多经验，但我认为每当向工作表添加新行时，我们都需要一个触发器来自动运行 SendEmail 函数，当然我在脚本编辑器（onEdit 和 onChange）中尝试了当前项目的触发器，但没有运气（我不明白为什么？？）

这是我的 html 文件：

<!DOCTYPE html>
<html lang="en">
<body>

<form name="Subscribe" id="Subscribe" action="https://script.google.com/macros/s/ScriptKey/exec" method="POST" onsubmit="myFunction()">
Form Inputs ..
</form>

<script>
function myFunction() {
  google.script.run.SendEmail();
}
</script>

</body>
</html>

这是我的 gs 文件：

function doGet() {
    return HtmlService.createTemplateFromFile('Form.html')
        .evaluate() // evaluate MUST come before setting the Sandbox mode
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

var sheetName = 'Emails'
var scriptProp = PropertiesService.getScriptProperties()


function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)
  
  try {
    var doc = SpreadsheetApp.getActive();
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'Timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
    var y = sheet.getLastRow();
    var x = sheet.getRange(y,2).getValues();

    return ContentService
      .createTextOutput(JSON.stringify({ 'Central Says': 'Successfully subscribed', 'Email': x }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

function SendEmail() {
var e = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sort Emails").getRange("B2").getValues();
var m = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Template").getRange("A1").getValues();
var subject = 'Welcome ..';
MailApp.sendEmail(e, subject, m);
}

Answer 1

首先，您必须更改openById("SPREADSHEET ID")的getActiveSpreadsheet() openById("SPREADSHEET ID") ，然后您有两个选择：

您保留SendEmail()函数：

function SendEmail() {
  var e = SpreadsheetApp.openById("SPREADSHEET ID").getSheetByName("Sort Emails").getRange("B2").getValue();
  var m = SpreadsheetApp.openById("SPREADSHEET ID").getSheetByName("Template").getRange("A1").getValue();
  var subject = 'Welcome ..';
  MailApp.sendEmail(e, subject, m);
}

或者在doPost执行所有操作并删除对 HTML 中SendEmail()函数的调用：

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {

    var e = SpreadsheetApp.openById("SPREADSHEET ID").getSheetByName("Sort Emails").getRange("B2").getValue();
    var m = SpreadsheetApp.openById("SPREADSHEET ID").getSheetByName("Template").getRange("A1").getValue();
    var subject = 'Welcome ..';
    MailApp.sendEmail(e, subject, m);

    var doc = SpreadsheetApp.getActive();
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'Timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
    var y = sheet.getLastRow();
    var x = sheet.getRange(y,2).getValues();

    return ContentService
    .createTextOutput(JSON.stringify({ 'Central Says': 'Successfully subscribed', 'Email' : x}))
    .setMimeType(ContentService.MimeType.JSON)  
  }
  catch (e) {
    return ContentService
    .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
    .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

Answer 2

正确的方法是向您应该创建的服务器端应用程序发出请求来处理这个服务器端的东西，一个 API。 你可以很容易地创建这个 API 工作框架，比如Express.js或Koa.js

然后在你的服务器端你会这样处理：

... // Initializing stuffs
app.post('/sendEmail/:email', function(req, res, next) {
    const userEmail = req.params.email;
    try {
        google.script.run.SendEmail(userEmail);
        res.json({ message: 'success' });
    } catch (err) {
        res
          .status(400)
          .json({ message: 'failure' + err.message })
    }
});

如何在 html 表单提交上运行服务器端功能

问题描述

2 个解决方案

解决方案1
0 2020-02-11 08:29:51

解决方案2
-1 2020-01-23 11:48:37

如何在 html 表单提交上运行服务器端功能

问题描述

2 个解决方案

解决方案1 0 2020-02-11 08:29:51

解决方案2 -1 2020-01-23 11:48:37

解决方案1
0 2020-02-11 08:29:51

解决方案2
-1 2020-01-23 11:48:37