Google Apps Script触发doPost时如何更新HTML前端展示WooCommerce新订单

方案1：GAS属性存储 + 前端短轮询（实现成本最低，适合低频次订单场景） #

你当前使用的是Google Apps Script（GAS）开发的webhook接口，该方案无需新增额外服务，直接在现有代码基础上修改即可。

第一步：修改GAS后端代码 #

新增订单存储逻辑和查询订单的doGet接口，修改后完整代码如下：

// 存储最新10条订单的标识
const ORDER_STORAGE_KEY = "latest_orders";
const MAX_ORDER_COUNT = 10;

function doPost(e) {
  try {
    const newOrder = JSON.parse(e.postData.contents);
    // 保留原有邮件通知逻辑
    MailApp.sendEmail({
      to: "xx.xx@xx.com",
      subject: "Call Sucessful",
      htmlBody: "Data: <br>" + JSON.stringify(newOrder)
    });
    // 新增：将新订单存入GAS属性存储
    const scriptProps = PropertiesService.getScriptProperties();
    let latestOrders = JSON.parse(scriptProps.getProperty(ORDER_STORAGE_KEY) || "[]");
    // 新订单插入列表头部，最多保留指定条数
    latestOrders.unshift(newOrder);
    if (latestOrders.length > MAX_ORDER_COUNT) {
      latestOrders = latestOrders.slice(0, MAX_ORDER_COUNT);
    }
    scriptProps.setProperty(ORDER_STORAGE_KEY, JSON.stringify(latestOrders));

    return ContentService.createTextOutput(JSON.stringify({status: "success"})).setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({status: "error", msg: err.message})).setMimeType(ContentService.MimeType.JSON);
  }
}

// 新增：给前端提供查询最新订单的接口
function doGet() {
  const scriptProps = PropertiesService.getScriptProperties();
  const latestOrders = JSON.parse(scriptProps.getProperty(ORDER_STORAGE_KEY) || "[]");
  // 允许前端跨域请求
  return ContentService.createTextOutput(JSON.stringify(latestOrders))
    .setMimeType(ContentService.MimeType.JSON)
    .setHeaders({
      "Access-Control-Allow-Origin": "*"
    });
}

修改完成后重新部署GAS Web应用，权限设置为任何人可访问，复制新的部署URL。

第二步：前端实现代码 #

前端定期请求doGet接口，对比本地已渲染订单判断是否有更新，自动刷新页面内容，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>实时WooCommerce订单</title>
</head>
<body>
  <h2>最新订单列表</h2>
  <div id="orderList"></div>
  <script>
    // 替换为你自己的GAS Web应用部署URL
    const GAS_GET_URL = "你的GAS部署链接";
    // 存储本地最新订单ID，用于判断是否有新订单
    let lastOrderId = null;
    // 轮询间隔，单位毫秒，低频订单场景设置3000（3秒）即可
    const POLL_INTERVAL = 3000;

    async function fetchLatestOrders() {
      try {
        const res = await fetch(GAS_GET_URL);
        const orders = await res.json();
        if (!orders.length) return;
        // 存在新订单则更新页面
        if (orders[0].id !== lastOrderId) {
          lastOrderId = orders[0].id;
          renderOrders(orders);
          // 可在此处扩展新订单提示音、弹窗提醒逻辑
        }
      } catch (err) {
        console.error("拉取订单失败", err);
      }
    }

    function renderOrders(orders) {
      const orderListEl = document.getElementById("orderList");
      orderListEl.innerHTML = orders.map(order => `
        <div style="border:1px solid #eee; padding:10px; margin:10px 0;">
          <p>订单号：${order.id}</p>
          <p>下单时间：${order.date_created}</p>
          <p>总金额：${order.total} ${order.currency}</p>
          <p>收货人：${order.billing.first_name} ${order.billing.last_name}</p>
        </div>
      `).join("");
    }

    // 页面加载时先拉取一次订单
    fetchLatestOrders();
    // 启动定时轮询
    setInterval(fetchLatestOrders, POLL_INTERVAL);
  </script>
</body>
</html>

方案2：WebSocket实时推送（延迟更低，适合高频订单场景） #

如果需要毫秒级更新、不想使用轮询，可替换原有GAS接口为Node.js服务，通过Socket.io实现服务端主动推送：

后端Node.js示例代码 #

const express = require('express');
const http = require('http');
const { Server } = require("socket.io");
const cors = require('cors');
const nodemailer = require('nodemailer');

const app = express();
app.use(cors());
app.use(express.json());
const server = http.createServer(app);
const io = new Server(server, { cors: { origin: "*" } });

// 存储最新订单列表
let latestOrders = [];

// 接收WooCommerce webhook推送的接口
app.post('/webhook/woocommerce', async (req, res) => {
  const newOrder = req.body;
  // 原有发邮件逻辑
  const transporter = nodemailer.createTransport({/* 自行配置邮件服务参数 */});
  await transporter.sendMail({
    to: "xx.xx@xx.com",
    subject: "新订单通知",
    html: "订单数据：<br>" + JSON.stringify(newOrder)
  });
  // 更新订单列表
  latestOrders.unshift(newOrder);
  if (latestOrders.length > 10) latestOrders = latestOrders.slice(0,10);
  // 主动推送给所有连接的前端
  io.emit('new_order', newOrder, latestOrders);
  res.sendStatus(200);
});

// 前端首次连接时返回历史订单
io.on('connection', (socket) => {
  socket.emit('init_orders', latestOrders);
});

server.listen(3000, () => {
  console.log('服务运行在3000端口');
});

前端实现代码 #

<!DOCTYPE html>
<html>
<body>
  <div id="orderList"></div>
  <!-- 自行引入本地存储的Socket.io客户端SDK -->
  <script src="本地Socket.io客户端文件路径"></script>
  <script>
    const socket = io('你的Node服务部署地址');
    // 首次加载拿到历史订单并渲染
    socket.on('init_orders', (orders) => {
      renderOrders(orders);
    });
    // 收到新订单推送直接更新页面
    socket.on('new_order', (newOrder, allOrders) => {
      renderOrders(allOrders);
      // 可在此处扩展新订单提醒逻辑
    });
    function renderOrders(orders) {
      // 渲染逻辑和方案1完全一致
    }
  </script>
</body>
</html>

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