如何使用HTML在邮件中实现点击按钮生成随机数并回传的功能

首先明确：需求可落地，但无法完全在HTML邮件内部完成，所有主流邮件客户端均默认屏蔽邮件内嵌JavaScript代码，因此动态生成随机数、按钮状态联动这类前端交互无法直接在邮件内运行，必须配合后端服务实现，具体步骤如下：

前置准备（发送邮件前操作） #

• 在服务端为每个收件人生成专属的4-6位唯一确认码，和该用户的报价、预约信息绑定存储到数据库，标记状态为待处理。

HTML邮件模板编写 #

两个按钮使用链接模拟样式即可，不要写JS逻辑，每个链接携带当前收件人的唯一标识参数（比如用户ID、邮件ID），示例代码如下：

<!-- 接受按钮 -->
<a href="https://你的后端服务地址/handle?uid=当前用户唯一标识&action=accept" style="display:inline-block;background:#1a73e8;color:#fff;padding:8px 24px;border-radius:4px;text-decoration:none;">ACCEPT（接受）</a>

<!-- 拒绝按钮 -->
<a href="https://你的后端服务地址/handle?uid=当前用户唯一标识&action=reject" style="display:inline-block;background:#ea4335;color:#fff;padding:8px 24px;border-radius:4px;text-decoration:none;margin-left:16px;">REJECT（拒绝）</a>

该方案兼容性覆盖所有支持HTML邮件的客户端，不会被拦截。

后端接口逻辑实现 #

你需要开发一个简单的接口接收按钮点击的请求，按以下逻辑处理：

接受请求处理规则 #

• 收到action=accept的请求后，先查询对应用户的记录状态：
  • 若状态为待处理：返回给用户提示页，展示预生成的确认码，同时将记录状态修改为已接受，后端自动同步该确认码和用户信息到你的管理后台/邮箱作为凭证。
  • 若状态为已接受/已拒绝：直接返回提示页，告知用户该请求已处理，不可重复提交。

拒绝请求处理规则 #

• 收到action=reject的请求后，先查询对应用户的记录状态：
  • 若状态为待处理：返回取消成功的提示页，同时将记录状态修改为已拒绝，后续该用户再点击接受链接，直接返回请求已失效的提示，等效实现接受按钮禁用的需求。
  • 若状态为已接受/已拒绝：直接返回提示页，告知用户该请求已处理。

可选优化 #

如果不想让用户跳转到外部页面，可以将按钮改为表单提交按钮，直接向你的后端接口发送POST请求，仅需注意部分小众邮件客户端会拦截表单提交，兼容性略低于链接跳转方案。

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