如何将Google Sheets生成的参考号返回至静态HTML网站展示

一、修改Google Apps Script代码 #

核心是让doPost接口返回生成的参考号，而非原始提交数据，需调整两个关键函数：

1. 调整appendToGoogleSheet函数，让它返回生成的参考号：

function appendToGoogleSheet(data) {
  if (TIME_STAMP_COLUMN_NAME !== "") {
    data[TIME_STAMP_COLUMN_NAME]=new Date();
  }

  let ref; // 声明变量存储最终生成的参考号
  if (sheet.getRange(sheet.getLastRow(), 2).getValue() !== 'Ref') {
    var refNum = sheet.getRange(sheet.getLastRow(), 2).getValue().replace("Port-","");
    var newRefNum = parseFloat(refNum)+1
    ref = 'Port-' + newRefNum
    data[REF_COLUMN_NAME] = ref
  } else {
     ref = 'Port-10000'
     data[REF_COLUMN_NAME] = ref
  }

  if (CUST_EMAIL_COLUMN_NAME !== "") {
    data[CUST_EMAIL_COLUMN_NAME]= 'test@test-net.co.uk';
  }

  if (TIME_COLUMN_NAME !== "") {
    data[TIME_COLUMN_NAME]= '10:00';
  }

  var headers = sheet.getRange(5, 1, 1, sheet.getLastColumn()).getValues()[0];
  var rowData = headers.map(headerFld => data[headerFld]);
  
  sheet.appendRow(rowData);
  
  return ref; // 返回生成的参考号给doPost函数
}

2. 修改doPost函数，返回包含参考号的JSON响应：

const doPost = (request = {}) => {
  const { postData: { contents, type } = {} } = request;
  var data = parseFormData(contents);

  const referenceNumber = appendToGoogleSheet(data); // 获取生成的参考号

  // 返回结构化的JSON数据，包含成功状态和参考号
  return ContentService.createTextOutput(
    JSON.stringify({
      success: true,
      ref: referenceNumber
    })
  ).setMimeType(ContentService.MimeType.JSON);
};

二、修改前端静态HTML的表单提交逻辑 #

静态页面需用JavaScript异步提交表单，才能接收Apps Script返回的参考号，示例代码如下：

<!-- 表单部分 -->
<form id="submitForm">
  <!-- 替换为你的实际表单字段 -->
  <input type="text" name="Name" placeholder="请输入姓名">
  <input type="tel" name="Phone" placeholder="请输入电话">
  <button type="submit">提交表单</button>
</form>

<!-- 成功提示区域，初始隐藏 -->
<div id="successBox" style="display: none; margin-top: 20px; padding: 15px; background: #e8f5e9;">
  提交成功！你的专属参考号：<strong id="refDisplay"></strong>
</div>

<script>
document.getElementById('submitForm').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止表单默认跳转行为
  
  // 收集表单数据
  const formData = new FormData(this);
  const formParams = new URLSearchParams(formData);

  try {
    // 发送请求到你的Apps Script部署URL
    const response = await fetch('你的Apps Script Web应用部署URL', {
      method: 'POST',
      body: formParams
    });

    const result = await response.json();
    
    if (result.success) {
      // 隐藏表单，显示成功信息
      this.style.display = 'none';
      document.getElementById('successBox').style.display = 'block';
      document.getElementById('refDisplay').textContent = result.ref;
      
      // 若需跳转到单独的成功页面，可使用以下代码（需创建success.html页面）
      // window.location.href = `success.html?ref=${encodeURIComponent(result.ref)}`;
    } else {
      alert('提交失败，请重试');
    }
  } catch (error) {
    alert('提交出错，请稍后再试');
    console.error(error);
  }
});
</script>

三、补充说明 #

• 替换代码中的你的Apps Script Web应用部署URL为你实际部署后的地址，部署时需选择**“任何人，甚至匿名”**的访问权限，否则静态页面无法发起请求。
• 若使用单独的成功页面，可在success.html中通过以下代码获取并展示参考号：

// success.html中的脚本
const urlParams = new URLSearchParams(window.location.search);
const ref = urlParams.get('ref');
document.getElementById('refDisplay').textContent = ref;

内容的提问来源于stack exchange，提问作者murday1983