如何在 js 中使用 smtp 以表单形式发送邮件答案

【问题标题】：How to mailto in form with smtp in js如何在 js 中使用 smtp 以表单形式发送邮件
【发布时间】：2017-02-11 18:37:57
【问题描述】：

我被困在这里了。我想要一个按钮（在这种情况下；发送电子邮件按钮）在不打开电子邮件客户端的情况下触发 mailto，我希望它自动发送（在 JS 中，smtp）。我不知道我是不是问的太多，这是否可能。这是我的表格：

<form id="form">
  <div class="row">
    <div class="col-md-6">
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user-secret fa-lg"></i></span>
        <input id="username" type="text" class="form-control blender-pro-book form-text" placeholder="Username" aria-describedby="basic-addon1">
        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user-secret fa-lg"></i></span>
        <input id="message" type="text" class="form-control blender-pro-book form-text" placeholder="Message" aria-describedby="basic-addon1">
      </div>
      <p class="error-holder"><span id="error" class="error blender-pro-book"><i class="fa fa-exclamation-triangle"></i>Try again please!</span></p>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
      <button id="start" type="button" class="btn btn-default btn-lg btn-block btn-custom blender-pro-book">Send e-mail <i class="fa fa-hand-o-right blue-text-color"></i></button>
    </div>
  </div>
</form>

我尝试输入了几个代码，但它们都导致打开电子邮件客户端。 然后，我发现SmtpJS.com。我已经将脚本代码放在了我的索引文件中，但是我不知道该把代码放在哪里：

Email.send("from@you.com",
"to@them.com",
"This is a subject",
"this is the body",
"mx1.hostinger.nl", */ That's my hosting SMTP /* 
"username",
"password");

我只想通过这个按钮发送电子邮件：

<button id="start" type="button" class="btn btn-default btn-lg btn-block btn-custom blender-pro-book">Send e-mail <i class="fa fa-hand-o-right blue-text-color"></i></button>

你能告诉我把它放在我的表格的什么地方吗？

非常感谢！

【问题讨论】：

您需要从客户端向服务器发起 AJAX 调用，以便它发送电子邮件。
@LuisDiegoHernández 感谢您的评论。我现在正在谷歌搜索:)

标签： javascript php email

【解决方案1】：

@Ty Q. 的回答是最好的方法，但是在查看了SmtpJS 之后，你会这样使用它：

<html>
  <head>

  </head>
  <body>
    <form id="form">
      <!--form goes here-->
      <input type="submit" value="Submit" />
    </form>
    <script src="http://smtpjs.com/smtp.js"></script>
    <script>
      function sendMail(e){
        event.preventDefault();
        console.log('This will send the mail through SmtpJS');
        Email.send("from@you.com",
          "to@them.com",
          "This is a subject",
          "this is the body",
          "smtp.yourisp.com",
          "username",
          "password");
      }

      function init(){
        document.getElementById('form').onsubmit = sendMail;
      }

      window.onload = init;
    </script>
  </body>
</html>

【讨论】：

非常感谢您的回答！不幸的是，这对我不起作用。提交按钮不做任何事情。你知道为什么吗？
您应该在本地环境中运行此代码，因为 sn-p 是沙盒的。将您的信息发送到Email.send() 内的信息，它应该可以工作。
我之前已经把我的信息放在那里了，但是还是不行。
可能与身份验证或其他问题有关。你能做到吗？
不，我做不到！我确实输入了正确的信息！

【解决方案2】：

为什么要使用一些 JavaScript 电子邮件服务？只需使用 PHP。
PHP 是一种服务器端语言。使用$To = $_POST['to']; 和$From = $_POST['from']; 之类的命令，您可以获取从表单元素发送的数据。我建议您阅读有关邮件功能的 PHP 手册，以了解如何使用 PHP 发送电子邮件。 PHP Mail function 其实很简单。如果你对 PHP 不太了解，直接去W3Schools.com's PHP tutorials.

<form method="POST" action="mymail.php">
<input name="to" type="text" placeholder="To:" value="" />
<input name="from" type="text" placeholder="From:" value="" />
<input name="cc" type="text" placeholder="CC:" value="" />
<!-- Blah Blah Blah, your code goes here, I'm not very good at this site -->
<input type="submit" value="Submit" />
</form>

在上面的代码中，它使用了一个带有属性方法和动作的表单元素。方法告诉客户端它将在 POST 或更安全的 GET 版本中运行。 GET 可以在这样的 URL 中看到：https://mywebsite.co/index.php?input=Hi
与 GET 不同，在 URL 中看不到 POST，因此更难干扰。换句话说，POST 使用起来更安全。 Action 代表数据将被发送到的文件。服务器将处理数据并将其解释为代码（如果提供）。 INPUT 标签必须有一个“名称”才能被服务器接收。 “类型”表示输入是否只是常规的“文本”、“密码”或“提交”。提交是一个按钮，它会告诉表单在单击时发送数据。 Placeholder 是 TEXT 和 PASSWORD 的输入属性，当值为 null 时将显示指定的输入。值是基本上包含您希望服务器接收的部分的属性。除了按钮，提交。 SUBMIT 按钮的值就是按钮将显示的文本。您不会从按钮本身收集数据。

【讨论】：

您好，非常感谢您的回答。什么代码去“那里”？你的意思是 email.send 吗？
@MelissaLockwood 你的意思是 ??如果您是，这只是您可能想要插入到表单中以进行设计或其他什么的额外代码，或者您可能需要按照我在上面代码中呈现的想法添加一些输入标签，以便您可以转移将数据添加到您的 PHP 文件中……如果您想使用 PHP（我推荐）。
JavaScript 只是让电子邮件发送过程更加混乱。我建议您避免使用它，因为它（最终）只是浪费时间。 PHP 有一个完整的函数设置，mail()。点击“提交”后，您可以使用表单发送此数据。
我一定很笨，但我完全不知道我现在该做什么。你能详细解释我该怎么做吗？
嗯，当然。我会继续快速编辑我的帖子。