如何捕获表单值并通过电子邮件作为 ajax 请求发送？导轨

Posted 2023-05-09

【中文标题】如何捕获表单值并通过电子邮件作为 ajax 请求发送？导轨

【英文标题】：How to capture form values and send them via email as ajax request ? Rails

【发布时间】：2018-01-05 20:04:57

【问题描述】：

我正在尝试设置一个简单的表单，用户可以在其中输入他的电子邮件地址来订阅新闻通讯。然后我会收到一封包含用户电子邮件地址的电子邮件。

这是我迄今为止尝试过的：

形式：

<%= form_for :subscribe, id: 'sub_form' do |f| %>
    <input type="email" name="email" placeholder="Your email address" id="sub_email">
    <button class="btn btn-success" type="submit" id="sub_btn">Subscribe</button><br>
    <p id="sub_output" class="lead" style="color: white;"></p>
<% end %>

路线

  post 'subscribe/:email', :to => 'welcome3#subscribe', as: "email_subscribtion"

控制器：

class Welcome3Controller < ApplicationController
  def subscribe
    EmailMeMailer.confirmation().deliver
  end
end

邮寄者：

class EmailMeMailer < ApplicationMailer
    default from: "[e-mail]"

  def confirmation
    @greeting = "Hi"

    mail to: "[e-mail]", subject: "subscribtion confirmation"
  end
end

JQuery Ajax 方法：

$('#sub_form').submit(function(e) 
    e.preventDefault();
  ).validate( 
    rules: 

      email: 
        required: true,
        email: true
      ,

    ,
    submitHandler: function (form) 

      var btn = $('#sub_btn');
      btn.button('loading');
      setTimeout(function() 
        btn.button('reset');
      , 3000);

      $.ajax(
        type: 'POST',
        url: '/subscribe',
        // data: form.serialize(),
        dataType: 'json',
        async: true,
        data: 
          csrfmiddlewaretoken: 'csrf_token',
          sub_email: $('#sub_email').val(),
        ,

        success: function (json) 

          $('#sub_output').html(json.message);
          $("#sub_email").prop('disabled', true);
        
      );

         return false; // for demo
      
 );

我被困在：如何捕获提交的电子邮件地址并将其发送给自己？我没有使用任何模型来保存数据。另外，根据this 教程，Mailer 无权访问 POST 请求。

请记住，我正在将 Django 应用程序转换为 RoR，以便可以将其部署在 cPanel 上。可以看到 Django 应用here：表单在页脚中。

这是风景：

<h1>Welcome3#subscribe</h1>
<p>Find me in app/views/welcome3/subscribe.html.erb</p>

编辑：

另外，在我的 Django 应用程序中，我发送到这个网址：

url: '/subscribe/'

data: 
    csrfmiddlewaretoken: 'csrf_token',
    email: $('#sub_email').val(),
    ,

这在 Rails 中应该有何不同？

这是 JQuery Ajax 请求一起

submitHandler: function (form) 

    var btn = $('#sub_btn');
    btn.button('loading');
    setTimeout(function() 
      btn.button('reset');
    , 3000);

    $.ajax(
      type: 'POST',
      url: '/subscribe/',
      // data: form.serialize(),
      dataType: 'json',
      async: true,
      data: 
        csrfmiddlewaretoken: 'csrf_token',
        email: $('#sub_email').val(),
      ,

      success: function (json) 

        $('#sub_output').html("Thanks");
        $("#sub_email").prop('disabled', true);
      
    );

       return false;
     

编辑 2：

在这个阶段，当我点击订阅按钮时，我收到这个路由错误：

路由错误没有路由匹配 [POST] "/"

Rails.root: C:/Sites/payligent

应用程序跟踪 |框架跟踪 |完整的跟踪路由

路由从上到下优先匹配

Helper HTTP Verb Path Controller#Action Path / Url Path Match root_path GET / 欢迎#index

package_signup_path GET /pricing/:level(.:format) welcome2#pricing

email_subscrition_path GET /subscribe/:email(.:format) 欢迎3#订阅

【参考方案1】：

您可以在控制器中获取发布数据，并将其作为参数传递给邮件操作。

编辑：上面的解决方案在这里工作。

HTML：

<%= form_for :subscribe, html:  id: 'sub_form'  do |f| %>
  <input type="email" name="email" placeholder="Your email address" id="sub_email">
  <button class="btn btn-success" type="submit" id="sub_btn">Subscribe</button><br>
  <p id="sub_output" class="lead" style="color: white;"></p>
<% end %>

javascript：

<script>
$('#sub_form').submit(function(e) 
  e.preventDefault();
).validate(
  rules: 
    email: 
      required: true,
      email: true
    ,
  ,
  submitHandler: function (form) 
    $.ajax(
      type: 'POST',
      url: '/subscribe',
      dataType: 'json',
      async: true,
      data: 
        csrfmiddlewaretoken: 'csrf_token',
        sub_email: $('#sub_email').val(),
      ,
      success: function (json) 
        $('#sub_output').html(json.message);
        $("#sub_email").prop('disabled', true);
      
    );

    return false;
  
);
</script>

控制器（app/controllers/welcome3_controller.rb）

class Welcome3Controller < ApplicationController
  def subscribe
    EmailMeMailer.confirmation(params[:sub_email]).deliver_now

    respond_to do |format|
      format.json  head :ok 
    end
  end
end

PS：.deliver 方法在 v2.3.8 之后是deprecated。你应该使用.deliver_now 来代替它。

邮件程序：(app/mailers/email_me_mailer.rb)

class EmailMeMailer < ApplicationMailer
    default from: "[e-mail]"

  def confirmation(email)
    @greeting = "Hi"
    @email = email

    mail to: "[e-mail]", subject: "subscribtion confirmation"
  end
end

邮件查看：(app/mailers/email_me_mailer.rb)

Email: <%= @email %>

路由：(config/routes.rb)

post '/subscribe' => 'welcome3#subscribe'

PS：

1) 不要忘记在 app/views/layouts/mailer.text.erb.

2) 请记住，布局和视图的扩展取决于您在邮件程序中定义的内容类型。如果是文本（默认），则文件扩展名为 .text.erb，如果是 HTML，文件将具有 .html.erb。

【讨论】：

谢谢！但是，我在哪个阶段阅读我在数据字典中传递的 sub_email。此外，我需要将其通过电子邮件发送到我自己的电子邮件地址而不是用户的（我需要通过电子邮件向自己发送用户的电子邮件地址）。

嘿伙计，在调用邮件操作传递电子邮件参数后，您可以将其设置为局部变量。所以它将在视图上下文中可见。我对示例进行了更新。看看它是否能解决你的问题。

谢谢。在这个阶段，我在单击提交按钮时收到路由错误。我相信它应该是ajax请求中的东西。 'url' 和 'data' 应该是什么样的？

我认为问题与触发事件.submit有关。如果您使用 AJAX 发送电子邮件数据，则不能让表单提交。您收到的路由错误（“没有路由匹配 [POST]”）可能是因为您的表单已提交给 action="/"。这解释了错误。我将用解决方案更新我的问题。等一下，兄弟。

@Seio，更新了答案。看看我放在那里的步骤。看看能不能解决问题。