如何不使用mailto和PHP，仅通过JavaScript实现邮件发送功能

实现原理 #

浏览器端原生JavaScript没有直接调用SMTP协议发送邮件的能力，因此我们需要借助支持前端直接调用的第三方邮件中转服务完成发送，不需要自行部署后端接口，也无需使用mailto协议。

实现步骤 #

• 第一步：注册前端邮件中转服务，完成基础配置
  1. 注册完成后在后台绑定接收邮件的目标邮箱
  2. 创建邮件发送服务，获取服务ID
  3. 配置邮件模板，模板变量和表单字段一一对应（比如{{nombre}}对应表单的nombre字段，{{apellido}}对应apellido字段，依次配置celular、correo、mensaje变量），获取模板ID
  4. 找到账号下的公开用户ID，后续前端初始化需要用到
• 第二步：修改原有HTML表单，引入SDK并添加发送逻辑

完整代码示例 #

<!-- 引入邮件中转服务SDK -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
// 初始化服务，替换为你自己的用户ID
emailjs.init("你的用户ID");

function sendMail() {
  // 获取表单字段值
  const params = {
    nombre: document.querySelector('input[name="nombre"]').value,
    apellido: document.querySelector('input[name="apellido"]').value,
    celular: document.querySelector('input[name="celular"]').value,
    correo: document.querySelector('input[name="correo"]').value,
    mensaje: document.querySelector('textarea[name="mensaje"]').value
  }

  // 发送邮件，参数依次为服务ID、模板ID、参数对象
  emailjs.send("你的服务ID", "你的模板ID", params)
  .then(function(res) {
    alert("邮件发送成功！")
    // 发送成功后清空表单
    document.querySelectorAll('input, textarea').forEach(item => item.value = '')
  }, function(error) {
    alert("邮件发送失败，请重试：" + error.text)
  })
}
</script>

<!-- 原有表单，仅修改按钮的onclick属性、添加必填校验 -->
<label>Nombre</label>
<input type="text" name="nombre" required/>
<label>Apellido</label>
<input type="text" name="apellido" required/>
<label>Celular</label>
<input type="text" name="celular" required/>
<label>Correo</label>
<input type="email" name="correo" required/>
<label>Mensaje</label>
<textarea row="2" name="mensaje" required></textarea>
<button type="button" onclick="sendMail()">Enviar</button>

注意事项 #

• 你可以自行扩展表单校验逻辑，避免不符合规则的内容提交
• 免费版的邮件中转服务一般有月度发送量限制，流量大的场景可以升级付费版本
• 所有敏感配置（目标邮箱、发件箱权限）都在服务后台存储，前端不会泄露相关信息，安全性有保障

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