چگونه از جاوااسکریپت ایمیل ارسال کنیم
من میخواهم وبسایتم قابلیت ارسال ایمیل بدون بارگذاری دوباره صفحه را داشته باشد. بنابراین میخواهم از جاوااسکریپت استفاده کنم.
<form action="javascript:sendMail();" name="pmForm" id="pmForm" method="post">
Enter Friend's Email:
<input name="pmSubject" id="pmSubject" type="text" maxlength="64" style="width:98%;" />
<input name="pmSubmit" type="submit" value="Invite" />
در اینجا نحوهای که میخواهم تابع را صدا بزنم آورده شده است، اما مطمئن نیستم چه چیزی را باید در تابع جاوااسکریپت قرار دهم. از تحقیقی که انجام دادهام، یک مثال پیدا کردم که از روش mailto استفاده میکند، اما فهم من این است که این روش در واقع مستقیم از سایت ارسال نمیکند.
پس سؤال من این است که کجا میتوانم پیدا کنم چه چیزی را باید داخل تابع جاوااسکریپت قرار دهم تا مستقیماً از وبسایت ایمیل ارسال شود.
function sendMail() {
/* ...code here... */
}
پاسخ شماره ۱
شما نمیتوانید مستقیماً با جاوااسکریپت ایمیل ارسال کنید.
با این حال، میتوانید کلاینت ایمیل کاربر را باز کنید:
window.open('mailto:[email ');
همچنین برخی پارامترها برای از قبل پر کردن موضوع و متن وجود دارند:
window.open('mailto:[email ?subject=subject&body=body');
راه حل دیگر این است که یک تماس آژاکس به سرور خود انجام دهید، تا سرور ایمیل را ارسال کند. مراقب باشید که اجازه ندهید کسی از طریق سرور شما هر ایمیلی ارسال کند.
پاسخ شماره ۲
غیرمستقیم از طریق سرور شما - تماس با API شخص ثالث - ایمن و توصیه شده
سرور شما میتواند از API شخص ثالث استفاده کند. کلیدهای API برای کاربر قابل مشاهده نیستند.
نود.جیاس
const axios = require('axios');
async function sendEmail(name, email, subject, message) {
const data = JSON.stringify({
"Messages": [{
"From": {"Email": "<YOUR EMAIL>", "Name": "<YOUR NAME>"},
"To": [{"Email": email, "Name": name}],
"Subject": subject,
"TextPart": message
}]
});
const config = {
method: 'post',
url: 'https://api.mailjet.com/v3.1/send',
data: data,
headers: {'Content-Type': 'application/json'},
auth: {username: '<API Key>', password: '<Secret Key>'},
};
return axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
}
// define your own email api which points to your server.
app.post('/api/sendemail/', function (req, res) {
const {name, email, subject, message} = req.body;
//implement your spam protection or checks.
sendEmail(name, email, subject, message);
});
و سپس از fetch در سمت کاربر برای فراخوانی API ایمیل خود استفاده کنید. از from email که برای ثبتنام در Mailjet استفاده کردهاید، استفاده کنید. میتوانید آدرسهای بیشتری را نیز تأیید کنید. Mailjet یک سطح رایگان سخاوتمندانه ارائه میدهد.
بهروزرسانی ۲۰۲۳: همانطور که در نظرات اشاره شد، روش زیر به دلیل CORS دیگر کار نمیکند
این تنها در صورتی مفید است که بخواهید ارسال ایمیل را امتحان کنید و برای انجام این کار
- به https://api.mailjet.com/stats مراجعه کنید (بله، یک صفحه 404)
- و این کد را در کنسول مرورگر اجرا کنید (با پر شدن مقادیر مخفی)
مستقیماً از مشتری - تماس با API شخص ثالث - توصیه نمیشود
به طور خلاصه:
- برای دریافت کلید API و رمز عبور، در Mailjet ثبتنام کنید
- از fetch برای فراخوانی API به منظور ارسال ایمیل استفاده کنید
مثل این -
function sendMail(name, email, subject, message) {
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.set('Authorization', 'Basic ' + btoa('<API Key>'+":" +'<Secret Key>'));
const data = JSON.stringify({
"Messages": [{
"From": {"Email": "<YOUR EMAIL>", "Name": "<YOUR NAME>"},
"To": [{"Email": email, "Name": name}],
"Subject": subject,
"TextPart": message
}]
});
const requestOptions = {
method: 'POST',
headers: myHeaders,
body: data,
};
fetch("https://api.mailjet.com/v3.1/send", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
sendMail('Test Name',"<YOUR EMAIL>",'Test Subject','Test Message')
توجه: به یاد داشته باشید که کلید API شما برای همه قابل مشاهده است، بنابراین هر کاربر مخربی ممکن است از کلید شما برای ارسال ایمیلهایی استفاده کند که میتواند سهمیه شما را مصرف کند.
پاسخ شماره ۳
من نتوانستم پاسخی پیدا کنم که واقعاً سؤال اصلی را راضی کند.
- مندریل به دلیل سیاست قیمتگذاری جدید آن مطلوب نیست، همچنین اگر میخواستید اعتبارنامههای خود را ایمن نگه دارید، نیاز به یک سرویس پشتیبان داشت.
- اغلب ترجیح داده میشود ایمیل خود را مخفی کنید تا در هیچ فهرستی قرار نگیرید (راهحل mailto این مسئله را آشکار میکند و برای اکثر کاربران مناسب نیست).
- راهاندازی sendMail یا نیاز به یک بکاند تنها برای ارسال یک ایمیل دردسر دارد.
من یک سرویس ساده و رایگان راهاندازی کردهام که به شما امکان میدهد تا یک درخواست استاندارد HTTP POST برای ارسال ایمیل انجام دهید. این سرویس PostMail نام دارد و شما میتوانید به سادگی یک فرم ارسال کنید، از جاوااسکریپت یا jQuery استفاده کنید. وقتی ثبتنام میکنید، کدی در اختیار شما قرار میدهد که میتوانید آن را کپی کرده و در وبسایت خود قرار دهید. در اینجا چند مثال آمده است:
جاوااسکریپت:
<form id="javascript_form">
<input type="text" name="subject" placeholder="Subject" />
<textarea name="text" placeholder="Message"></textarea>
<input type="submit" id="js_send" value="Send" />
</form>
<script>
//update this with your js_form selector
var form_id_js = "javascript_form";
var data_js = {
"access_token": "{your access token}" // sent after you sign up
};
function js_onSuccess() {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
}
function js_onError(error) {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
}
var sendButton = document.getElementById("js_send");
function js_send() {
sendButton.value='Sending…';
sendButton.disabled=true;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
js_onSuccess();
} else
if(request.readyState == 4) {
js_onError(request.response);
}
};
var subject = document.querySelector("#" + form_id_js + " [name='subject']").value;
var message = document.querySelector("#" + form_id_js + " [name='text']").value;
data_js['subject'] = subject;
data_js['text'] = message;
var params = toParams(data_js);
request.open("POST", "https://postmail.invotes.com/send", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(params);
return false;
}
sendButton.onclick = js_send;
function toParams(data_js) {
var form_data = [];
for ( var key in data_js ) {
form_data.push(encodeURIComponent(key) + "=" + encodeURIComponent(data_js[key]));
}
return form_data.join("&");
}
var js_form = document.getElementById(form_id_js);
js_form.addEventListener("submit", function (e) {
e.preventDefault();
});
</script>
jQuery :
<form id="jquery_form">
<input type="text" name="subject" placeholder="Subject" />
<textarea name="text" placeholder="Message" ></textarea>
<input type="submit" name="send" value="Send" />
</form>
<script>
//update this with your $form selector
var form_id = "jquery_form";
var data = {
"access_token": "{your access token}" // sent after you sign up
};
function onSuccess() {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0";
}
function onError(error) {
// remove this to avoid redirect
window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1";
}
var sendButton = $("#" + form_id + " [name='send']");
function send() {
sendButton.val('Sending…');
sendButton.prop('disabled',true);
var subject = $("#" + form_id + " [name='subject']").val();
var message = $("#" + form_id + " [name='text']").val();
data['subject'] = subject;
data['text'] = message;
$.post('https://postmail.invotes.com/send',
data,
onSuccess
).fail(onError);
return false;
}
sendButton.on('click', send);
var $form = $("#" + form_id);
$form.submit(function( event ) {
event.preventDefault();
});
</script>
باز هم، برای شفافسازی کامل، من این سرویس را ایجاد کردم زیرا نتوانستم پاسخ مناسبی پیدا کنم.
پاسخ شماره ۴
میدانم که خیلی دیر شده تا برای این سؤال پاسخی بنویسم، اما با این حال فکر میکنم این برای هر کسی که در فکر ارسال ایمیل از طریق جاوااسکریپت است مفید خواهد بود.
اولین روشی که پیشنهاد میکنم استفاده از یک کالبک برای انجام این کار روی سرور است. اگر واقعاً میخواهید این با استفاده از جاوااسکریپت انجام شود، چیزی که من توصیه میکنم، به شرح زیر است.
سادهترین روشی که پیدا کردم استفاده از smtpJs بود. یک کتابخانه رایگان که میتوان از آن برای ارسال ایمیل استفاده کرد.
1. اسکریپت را به صورت زیر درج کنید
<script src="https://smtpjs.com/v3/smtp.js"></script>
۲. شما میتوانید یا یک ایمیل مانند این ارسال کنید
Email.send({
Host : "smtp.yourisp.com",
Username : "username",
Password : "password",
To : '[email ',
From : "[email ",
Subject : "This is the subject",
Body : "And this is the body"
}).then(
message => alert(message)
);که توصیه نمیشود زیرا رمز عبور شما را در سمت مشتری نمایش میدهد. بنابراین میتوانید اقدامات زیر را انجام دهید که اطلاعات ورود SMTP خود را رمزگذاری کنید، آن را به یک دامنه خاص محدود کنید، و به جای اطلاعات ورود، یک توکن امن منتقل کنید.
Email.send({
SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
To : '[email ',
From : "[email ",
Subject : "This is the subject",
Body : "And this is the body"
}).then(
message => alert(message)
);در نهایت، اگر سرور SMTP ندارید، از یک سرویس رله SMTP مانند Elastic Email استفاده میکنید.
همچنین اینجا لینک وبسایت رسمی SmtpJS.com است که میتوانید تمام مثالهایی که نیاز دارید را پیدا کنید و مکانی که میتوانید توکن امن خود را ایجاد کنید.
امیدوارم کسی این جزئیات را مفید بیابد. برنامهنویسی شادی داشته باشید.
پاسخ شماره ۵
میتوانید در این پست بفهمید چه چیزی باید داخل تابع جاوااسکریپت قرار دهید.
function getAjax() {
try {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch (try_again) {
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
} catch (fail) {
return null;
}
}
function sendMail(to, subject) {
var rq = getAjax();
if (rq) {
// Success; attempt to use an Ajax request to a PHP script to send the e-mail
try {
rq.open('GET', 'sendmail.php?to=' + encodeURIComponent(to) + '&subject=' + encodeURIComponent(subject) + '&d=' + new Date().getTime().toString(), true);
rq.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 400) {
// The request failed; fall back to e-mail client
window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
}
}
};
rq.send(null);
} catch (fail) {
// Failed to open the request; fall back to e-mail client
window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
}
} else {
// Failed to create the request; fall back to e-mail client
window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject));
}
}
اسکریپت PHP (یا هر زبان دیگری) خود را برای ارسال ایمیل ارائه دهید.
پاسخ شماره ۶
من این خبر را به تو میگویم. شما نمیتوانید مستقیماً با جاوا اسکریپت ایمیل بفرستید.
با توجه به زمینهٔ سوال OP، پاسخ من که در بالا داده شده دیگر درست نیست همانطور که @KennyEvitt در نظرات اشاره کرده است. به نظر میرسد میتوانید از جاوااسکریپت به عنوان یک کلاینت SMTP استفاده کنید.
با این حال، من بررسی عمیقتری نکردهام تا بفهمم آیا امن و با مرورگرهای مختلف سازگار است یا خیر. بنابراین، نمیتوانم شما را به استفاده از آن تشویق یا از آن بازدارم. استفاده بر عهده خودتان است.
پاسخ شماره ۷
به نظر میرسد یک راهحل جدید در افق وجود دارد. نام آن EmailJS است. آنها ادعا میکنند که نیازی به کد سرور نیست. میتوانید درخواست دعوتنامه دهید.
بهروزرسانی اوت ۲۰۱۶: به نظر میرسد EmailJS هماکنون فعال است. شما میتوانید ماهانه تا ۲۰۰ ایمیل به صورت رایگان ارسال کنید و اشتراکهایی برای حجمهای بالاتر ارائه میدهد.