如何在 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