如何通过 HTML 和 JavaScript 发送电子邮件？
Posted
技术标签:
【中文标题】如何通过 HTML 和 JavaScript 发送电子邮件？【英文标题】：How do I send email through HTML and JavaScript? 【发布时间】：2014-07-01 02:56:25 【问题描述】：我的网站上有一个联系表，我想制作一个发送按钮。我不希望计算机上的电子邮件程序启动，我只想通过按下按钮立即将文本发送到我的电子邮件。我已经在互联网上搜索了几个星期，我要放弃了。
<form method="post" name="contact" action="#">
<label for="author">Name:</label>
<input type="text" id="author" name="author" class="required input_field" />
<div class="cleaner h10"></div>
<label for="email">Email:</label>
<input type="text" class="validate-email required input_field" name="email" id="email" />
<div class="cleaner h10"></div>
<label for="subject">Subject:</label>
<input type="text" class="validate-subject required input_field" name="subject" id="subject"/>
<div class="cleaner h10"></div>
<label for="text">Message:</label>
<textarea id="text" name="text" rows="0" cols="0" class="required"></textarea>
<div class="cleaner h10"></div>
<input type="submit" value="Send" id="submit" name="submit" class="submit_btn float_l" />
<input type="reset" value="Reset" id="reset" name="reset" class="submit_btn float_r" />
</form>
【问题讨论】：
你不能。您需要像 php 这样的后端脚本语言来处理服务器上的请求并启动电子邮件的发送。 JS 无法做到这一点。另外，我不敢相信您已经尝试了数周搜索互联网，这是 Web 开发的第一天。只需谷歌“PHP 电子邮件脚本教程”。 客户端代码不能这样做。你需要使用后端语言来做这样的事情。即 PHP、ASP.NET 等 很明显，当您说无法使用 JS 完成时，我已经搜索了数周的事实现在变得更加清楚，因为我一直在寻找 JS 中的答案。谢谢你的回答，但是，说我在撒谎并没有太大帮助。是的，这可能是网页开发的第一天，但我不是网页设计师！ 给我看例子的php代码是不是太多了？Is it to much php code for you guys to show me an example? - 一个非常简单的php email tutorial google 搜索将为您生成无数示例
【参考方案1】：
如果您不想使用 php，您可以尝试使用 外部 API 为您提供要发送的电子邮件。
Mandrill 可以做到这一点。 每月最多可免费发送 12k 封电子邮件。
在您的页面中，代码将是这样的：
$.ajax(
type: “POST”,
url: “https://mandrillapp.com/api/1.0/messages/send.json”,
data:
‘key’: ‘YOUR API KEY HERE’,
‘message’:
‘from_email’: ‘YOUR@EMAIL.HERE’,
‘to’: [
‘email’: ‘RECIPIENT_NO_1@EMAIL.HERE’,
‘name’: ‘RECIPIENT NAME (OPTIONAL)’,
‘type’: ‘to’
,
‘email’: ‘RECIPIENT_NO_2@EMAIL.HERE’,
‘name’: ‘ANOTHER RECIPIENT NAME (OPTIONAL)’,
‘type’: ‘to’
],
‘autotext’: ‘true’,
‘subject’: ‘YOUR SUBJECT HERE!’,
‘html’: ‘YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!’
).done(function(response)
console.log(response); // if you're into that sorta thing
);
这里如何：
https://medium.com/design-startups/b53319616782
http://www.codecademy.com/tracks/mandrill （CodeCademy 可以教如何使用 API）
【讨论】：
【参考方案2】：发送邮件的过程发生在服务器端，HTML/javascript 是客户端。据我所知，您没有使用网络服务器，也没有在某处托管网站。
XAMPP 的新安装有一个 FakeSendMail 选项，您可以使用它来模拟 PHP 的 mail() 函数。 XAMPP 是最著名的 localhost Web 服务器之一，您可以使用它来完成您的项目，以防您真的不需要实际发送该邮件。如果你这样做，我建议使用虚拟主机。
但首先您需要了解客户端和服务器端之间的区别。就客户端而言，它所做的只是呈现您的静态数据。 （HTML/CSS/JS）。但是，对于服务器端，它还有更多用途，因为您可以使用数据库，从数据库中获取和插入数据，并最终呈现将由浏览器（客户端）处理的数据
【讨论】：
【参考方案3】：这可能是您要搜索的内容：http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form。你只能通过使用 PHP 和 HTML + AJAX 来做你想做的事。在 HTML 中创建表单，然后使用 Jquery POST 请求发送请求 + 数据，如下所示：
$.post('sendmail.php', post_data, function(response) ...
【讨论】：
【参考方案4】：我认为你也没有在网上“搜索”好几个星期 :) 谷歌搜索后，我得到以下信息： https://medium.com/design-startups/b53319616782
从技术上讲，仅使用 javascript 是不可能发送电子邮件的。您总是需要后端服务。但正如上面链接中所述，大多数免费（取决于数量）服务可用（如上面文章中所述：https://mandrill.com/）。
这是上面链接的代码示例：
$.ajax(
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data:
'key’: 'YOUR API KEY HERE’,
'message':
'from_email': 'YOUR@EMAIL.HERE',
'to': [
'email': 'RECIPIENT_NO_1@EMAIL.HERE',
'name': 'RECIPIENT NAME (OPTIONAL)',
'type': 'to'
,
'email': 'RECIPIENT_NO_2@EMAIL.HERE',
'name': 'ANOTHER RECIPIENT NAME (OPTIONAL)',
'type': 'to'
],
'autotext': 'true',
'subject': 'YOUR SUBJECT HERE!',
'html': 'YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!'
).done(function(response)
console.log(response); // if you're into that sorta thing
);
希望这会有所帮助。
最好的问候， 克里斯
【讨论】：
【参考方案5】：我很懒惰，无耻地抄袭了 W3Schools（请不要说 W3Schools 有多糟糕，我知道，但这是有目的的！）>
<h2>Feedback Form</h2>
<?php
// display form if user has not clicked submit
if (!isset($_POST["submit"]))
?>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
From: <input type="text" name="from"><br>
Subject: <input type="text" name="subject"><br>
Message: <textarea rows="10" cols="40" name="message"></textarea><br>
<input type="submit" name="submit" value="Submit Feedback">
</form>
<?php
else // the user has submitted the form
// Check if the "from" input field is filled out
if (isset($_POST["from"]))
$from = $_POST["from"]; // sender
$subject = $_POST["subject"];
$message = $_POST["message"];
// message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
// send mail
mail("webmaster@example.com",$subject,$message,"From: $from\n");
echo "Thank you for sending us feedback";
?>
【讨论】：
以上是关于如何通过 HTML 和 JavaScript 发送电子邮件？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 RPC 发送 GET JavaScript 对象？
Javascript - 使用 HTML 片段通过电子邮件发送 JSON 输出
如何通过 javascript/jQuery 中的 url 发送数组