如何通过 HTML 和 JavaScript 发送电子邮件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23631172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I send email through HTML and JavaScript?
提问by Darawan
I have a contact form on my website and I wanted to make a send button. I would not want an e-mail program on the computer to start, I just want the text to be sent to my e-mail right away by just pressing the button. I have searched for weeks now on the internet and I am giving up.
我的网站上有一个联系表格，我想制作一个发送按钮。我不想启动计算机上的电子邮件程序，我只想通过按下按钮立即将文本发送到我的电子邮件中。我已经在互联网上搜索了几个星期，我放弃了。
<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>
采纳答案by Eduard
The process of sending a mail happens server-side, HTML/JavaScript is client-side. As far as I can see you're not using a web-server nor are you hosting the website somewhere.
发送邮件的过程发生在服务器端，HTML/JavaScript 是客户端。据我所知，您没有使用网络服务器，也没有在某处托管网站。
There is a FakeSendMail option with the new install from XAMPPwhich you could use to emulate the mail() function from PHP. XAMPP is one of the most known localhost web servers , which you could use to finish your project, in case you don't really need that mail to be actually sent. If you do, I recommend using a webhosting.
XAMPP的新安装有一个 FakeSendMail 选项，您可以使用它来模拟 PHP 中的 mail() 函数。XAMPP 是最著名的 localhost Web 服务器之一，您可以使用它来完成您的项目，以防您真的不需要实际发送该邮件。如果你这样做，我建议使用虚拟主机。
But first you need to understand the difference between Client-Side and Server-Side. As far as Client Side is concerned, all it does is render your static data. (HTML/CSS/JS). But, as for Server Side, there is a lot more use to it, as you can work with a database, fetch and insert data from or to it, and eventually render data which will be processed by the Browser (client side)
但首先您需要了解客户端和服务器端之间的区别。就客户端而言，它所做的只是呈现您的静态数据。（HTML/CSS/JS）。但是，对于服务器端，它还有更多用途，因为您可以使用数据库，从中获取和插入数据，并最终呈现将由浏览器（客户端）处理的数据
回答by edubriguenti
Maybe if you don't want to use php, you may try just use an external APIto provide you the email to be sent.
也许如果您不想使用php，您可以尝试使用外部 API为您提供要发送的电子邮件。
Mandrillcan do that. It's free up to 12k emails per month.
Mandrill可以做到这一点。 每月最多可免费发送 12k 封电子邮件。
In you page the code would be like this:
在您的页面中，代码将如下所示：
$.ajax({
type: “POST”,
url: “https://mandrillapp.com/api/1.0/messages/send.json”,
data: {
‘key': ‘YOUR API KEY HERE',
‘message': {
‘from_email': ‘[email protected]',
‘to': [
{
‘email': ‘[email protected]',
‘name': ‘RECIPIENT NAME (OPTIONAL)',
‘type': ‘to'
},
{
‘email': ‘[email protected]',
‘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
});
Here how:
这里如何：
https://medium.com/design-startups/b53319616782
https://medium.com/design-startups/b53319616782
http://www.codecademy.com/tracks/mandrill(CodeCademy can teach how to use the API)
http://www.codecademy.com/tracks/mandrill（CodeCademy可以教如何使用 API）
回答by Agli Panci
This maybe what are you searching for: http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form. You can only do what do you want by using PHP and HTML + AJAX. Create the form in HTML and than send the request + data using Jquery POST request like this:
这可能是您要搜索的内容：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){ ... }
回答by Chris
I don't think you 'searched' the net for weeks either :) After one google search I got the following: https://medium.com/design-startups/b53319616782
我认为你几周都没有“搜索”网络:) 谷歌搜索后，我得到了以下信息：https: //medium.com/design-startups/b53319616782
Thechnically it is not possible to send emails with javascript alone. You always need a backend service. But as described in the link above, there are mostly free (depends on volume) services available (as mentioned in the article above: https://mandrill.com/).
从技术上讲，单独使用 javascript 发送电子邮件是不可能的。您总是需要后端服务。但如上面的链接所述，大多数免费（取决于数量）服务可用（如上面的文章所述：https: //mandrill.com/）。
here is the code example of the link above:
这是上面链接的代码示例：
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': 'YOUR API KEY HERE',
'message': {
'from_email': '[email protected]',
'to': [
{
'email': '[email protected]',
'name': 'RECIPIENT NAME (OPTIONAL)',
'type': 'to'
},
{
'email': '[email protected]',
'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
});
Hope this helps.
希望这可以帮助。
Best regards, Chris
最好的问候，克里斯
回答by Hyman_of_All_Trades
I am being lazy and copied shamelessly from W3Schools (Please don't go and say how crappy W3schools is, I know but this serves the purpose!)>
我很懒惰，无耻地从 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("[email protected]",$subject,$message,"From: $from\n");
echo "Thank you for sending us feedback";
}
}
?>
