如何修复Rails中HTML按钮结合JavaScript发送邮件的代码？

你的前端代码已经完成了发送POST请求的逻辑，但缺少后端邮件发送的核心处理，以下是完整修复步骤：

1. 配置开发环境的邮件投递方式（方便测试） #

在config/environments/development.rb中添加配置，使用letter_opener预览邮件（无需真实发送）：

# 开发环境用letter_opener打开邮件预览
config.action_mailer.delivery_method = :letter_opener
# 设置邮件中的默认域名
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

2. 创建邮件处理类（Mailer） #

执行生成命令创建Mailer：

rails generate mailer UserMailer send_test_email

编辑生成的app/mailers/user_mailer.rb，定义邮件内容：

class UserMailer < ApplicationMailer
  # 发件人默认地址
  default from: 'noreply@yourapp.com'

  def send_test_email
    # 发送邮件到指定收件人
    mail(to: 'test@example.com', subject: '测试邮件：来自Rails按钮点击') do |format|
      format.text { render plain: '这是通过点击按钮触发的测试邮件！' }
      format.html { render html: '<h1>这是通过点击按钮触发的测试邮件！</h1>'.html_safe }
    end
  end
end

3. 完善控制器的POST请求处理 #

假设你的根路径对应RootController，编辑app/controllers/root_controller.rb，添加处理POST请求的动作：

class RootController < ApplicationController
  def index
    # 首页渲染逻辑，保持空即可
  end

  def create
    # 调用Mailer发送邮件
    UserMailer.send_test_email.deliver_now
    # 返回成功响应给前端
    head :ok
  end
end

4. 配置路由，让POST请求指向正确的控制器动作 #

编辑config/routes.rb，确保根路径的POST请求被路由到root#create：

Rails.application.routes.draw do
  root 'root#index'
  # 处理根路径的POST请求
  post root_path, to: 'root#create'
end

5. （可选）优化前端反馈 #

你可以把前端的成功提示调整得更友好，比如：

document.querySelector(".send-email").onsubmit = function(e) {
  e.preventDefault()

  fetch(e.target.action, {
    method: "POST",
    headers: {
      "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
    }
  }).then(function(response) {
    if (response.ok) {
      alert('邮件发送成功！');
      window.open('/mail', '_blank'); // letter_opener的预览页面
    } else {
      console.error('邮件发送失败，请检查后端日志');
    }
  }).catch(function(error) {
    console.error('请求出错:', error);
  });
}

完成以上步骤后，点击按钮就能触发邮件发送，开发环境下会自动打开letter_opener的预览页面查看邮件内容。

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