Cara mengirim email dari JavaScript

Saya ingin situs web saya memiliki kemampuan untuk mengirim email tanpa menyegarkan halaman. Jadi saya ingin menggunakan Javascript.

<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" />

Inilah cara saya ingin memanggil fungsi, tetapi saya tidak yakin apa yang harus dimasukkan ke dalam fungsi javascript. Dari penelitian yang telah saya lakukan saya menemukan contoh yang menggunakan metode mailto, tetapi pemahaman saya adalah bahwa sebenarnya tidak mengirim langsung dari situs.

Jadi pertanyaan saya adalah di mana saya dapat menemukan apa yang harus dimasukkan ke dalam fungsi JavaScript untuk mengirim email langsung dari situs web.

function sendMail() {
    /* ...code here...    */
}

Anda tidak dapat mengirim email secara langsung dengan javascript.

Namun, Anda dapat membuka klien email pengguna:

window.open('mailto:test@example.com');

Ada juga beberapa parameter untuk mengisi awal subjek dan isi:

window.open('mailto:test@example.com?subject=subject&body=body');

Solusi lain adalah dengan melakukan panggilan ajax ke server Anda, sehingga server mengirim email. Berhati-hatilah untuk tidak mengizinkan siapa pun mengirim email melalui server Anda.

Tidak Langsung melalui Server Anda - Memanggil API Pihak Ketiga - aman dan direkomendasikan

Server Anda dapat memanggil API Pihak Ketiga setelah otentikasi dan otorisasi yang tepat. Kunci API tidak terpapar ke klien.

node.js - https://www.npmjs.org/package/node-mandrill

var mandrill = require('node-mandrill')('<your API Key>'); 

function sendEmail ( _name, _email, _subject, _message) {
    mandrill('/messages/send', {
        message: {
            to: [{email: _email , name: _name}],
            from_email: 'noreply@yourdomain.com',
            subject: _subject,
            text: _message
        }
    }, function(error, response){
        if (error) console.log( error );
        else console.log(response);
    });
}

// define your own email api which points to your server.

app.post( '/api/sendemail/', function(req, res){

    var _name = req.body.name;
    var _email = req.body.email;
    var _subject = req.body.subject;
    var _messsage = req.body.message;

    //implement your spam protection or checks. 

    sendEmail ( _name, _email, _subject, _message );

});

dan kemudian gunakan gunakan $ .ajax pada klien untuk memanggil API email Anda.

Langsung Dari Klien - Memanggil API Pihak Ketiga - tidak direkomendasikan

Kirim email hanya menggunakan JavaScript

in short: 
1. register for Mandrill to get an API key
2. load jQuery
3. use $.ajax to send an email

Seperti ini -

function sendMail() {
    $.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@EMAIL.HERE',
                'name': '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

Catatan: Perlu diingat bahwa kunci API Anda dapat dilihat oleh siapa saja, sehingga setiap pengguna jahat dapat menggunakan kunci Anda untuk mengirim email yang dapat menghabiskan kuota Anda.

Saya tidak dapat menemukan jawaban yang benar-benar memuaskan pertanyaan awal.

• Mandrill tidak diinginkan karena kebijakan penetapan harganya yang baru, plus itu membutuhkan layanan backend jika Anda ingin menjaga kredensial Anda aman.
• Seringkali lebih baik menyembunyikan email Anda sehingga Anda tidak berakhir pada daftar apa pun (solusi mailto memaparkan masalah ini, dan tidak nyaman bagi sebagian besar pengguna).
• Ini merepotkan untuk mengatur sendMail atau memerlukan backend sama sekali hanya untuk mengirim email.

Saya mengumpulkan layanan gratis sederhana yang memungkinkan Anda untuk membuat permintaan HTTP POST standar untuk mengirim email. Ini disebut PostMail , dan Anda bisa memposting formulir, menggunakan Javascript atau jQuery. Ketika Anda mendaftar, itu memberi Anda kode yang dapat Anda salin & tempel ke situs web Anda. Berikut ini beberapa contohnya:

Javascript:

<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>

Sekali lagi, dalam pengungkapan penuh, saya membuat layanan ini karena saya tidak dapat menemukan jawaban yang cocok.

Anda dapat menemukan apa yang harus dimasukkan ke dalam fungsi JavaScript dalam posting ini.

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));
     }
}

Berikan skrip PHP Anda sendiri (atau bahasa apa pun) untuk mengirim surel.

Saya menyampaikan kabar ini kepada Anda. Anda TIDAK BISA mengirim email dengan JavaScript per se.

Berdasarkan konteks pertanyaan OP, jawaban saya di atas tidak berlaku lagi seperti yang ditunjukkan oleh @KennyEvitt di komentar. Sepertinya Anda dapat menggunakan JavaScript sebagai klien SMTP .

Namun , saya belum menggali lebih dalam untuk mencari tahu apakah itu cukup aman & lintas-browser. Jadi, saya tidak bisa mendorong atau mencegah Anda untuk menggunakannya. Gunakan dengan risiko Anda sendiri.

Saya tahu saya terlambat untuk menulis jawaban untuk pertanyaan ini, tetapi saya pikir ini akan digunakan untuk siapa saja yang berpikir untuk mengirim email melalui javascript.

Cara pertama yang saya sarankan adalah menggunakan callback untuk melakukan ini di server. Jika Anda benar-benar ingin itu ditangani menggunakan folowing javascript adalah apa yang saya sarankan.

Cara termudah yang saya temukan adalah menggunakan smtpJs. Perpustakaan gratis yang dapat digunakan untuk mengirim email.

1. Sertakan skrip seperti di bawah ini

<script src="https://smtpjs.com/v3/smtp.js"></script>

2. Anda dapat mengirim email seperti ini

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
    }).then(
      message => alert(message)
    );

Yang tidak disarankan karena akan menampilkan kata sandi Anda di sisi klien. Dengan demikian, Anda dapat melakukan hal berikut yang mengenkripsi kredensial SMTP Anda, dan menguncinya ke domain tunggal, dan meneruskan token aman alih-alih kredensial sebagai gantinya.

Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

Terakhir, jika Anda tidak memiliki server SMTP, Anda menggunakan layanan relai smtp seperti Email Elastis

Juga di sini adalah tautan ke situs web resmi SmtpJS.com di mana Anda dapat menemukan semua contoh yang Anda butuhkan dan tempat di mana Anda dapat membuat token aman Anda.

Saya harap seseorang menemukan detail ini bermanfaat. Selamat coding.

Tampaknya ada solusi baru di cakrawala. Ini disebut EmailJS . Mereka mengklaim bahwa tidak ada kode server yang diperlukan. Anda dapat meminta undangan.

Pembaruan Agustus 2016: EmailJS tampaknya sudah tayang. Anda dapat mengirim hingga 200 email per bulan secara gratis dan menawarkan langganan untuk volume yang lebih tinggi.

window.open ('mailto: test@example.com'); seperti di atas tidak menyembunyikan alamat email "test@example.com" agar tidak dipanen oleh robot spam. Dulu saya sering mengalami masalah ini.

var recipient="test";
var at = String.fromCharCode(64);
var dotcom="example.com";
var mail="mailto:";
window.open(mail+recipient+at+dotcom);

Javascript adalah sisi klien, Anda tidak dapat mengirim email dengan Javascript. Browser hanya mengenali mungkin mailto:dan memulai klien email default Anda.

Dalam sendMail()fungsi Anda , tambahkan panggilan ajax ke backend Anda, di mana Anda dapat menerapkan ini di sisi server.

JavaScript tidak dapat mengirim email dari browser web. Namun, mundur dari solusi yang sudah Anda coba terapkan, Anda dapat melakukan sesuatu yang memenuhi persyaratan asli:

mengirim email tanpa menyegarkan halaman

Anda dapat menggunakan JavaScript untuk membangun nilai-nilai yang dibutuhkan email dan kemudian membuat permintaan AJAX ke sumber daya server yang benar-benar mengirim email. (Saya tidak tahu bahasa / teknologi sisi server apa yang Anda gunakan, sehingga bagian itu terserah Anda.)

Jika Anda tidak terbiasa dengan AJAX, pencarian Google cepat akan memberi Anda banyak informasi. Secara umum, Anda bisa menjalankannya dengan cepat menggunakan fungsi $ .ajax () dari jQuery. Anda hanya perlu memiliki halaman di server yang dapat dipanggil dalam permintaan.

Sepertinya satu 'jawaban' untuk ini adalah menerapkan klien SMPT. Lihat email.js untuk perpustakaan JavaScript dengan klien SMTP.

Inilah repo GitHub untuk klien SMTP. Berdasarkan README repo, tampak bahwa berbagai shims atau polyfill mungkin diperlukan tergantung pada browser klien, tetapi secara keseluruhan itu tampaknya layak (jika tidak benar-benar dicapai secara signifikan), tidak dengan cara yang mudah dijelaskan oleh bahkan jawaban panjang di sini.

Ada layanan kombinasi. Anda dapat menggabungkan solusi yang tercantum di atas seperti mandrill dengan layanan EmailJS, yang dapat membuat sistem lebih aman. Mereka belum memulai layanan.

Cara lain untuk mengirim email dari JavaScript, adalah dengan menggunakan directtomx.com sebagai berikut;

 Email = {
 Send : function (to,from,subject,body,apikey)
    {
        if (apikey == undefined)
        {
            apikey = Email.apikey;
        }
        var nocache= Math.floor((Math.random() * 1000000) + 1);
        var strUrl = "http://directtomx.azurewebsites.net/mx.asmx/Send?";
        strUrl += "apikey=" + apikey;
        strUrl += "&from=" + from;
        strUrl += "&to=" + to;
        strUrl += "&subject=" + encodeURIComponent(subject);
        strUrl += "&body=" + encodeURIComponent(body);
        strUrl += "&cachebuster=" + nocache;
        Email.addScript(strUrl);
    },
    apikey : "",
    addScript : function(src){
            var s = document.createElement( 'link' );
            s.setAttribute( 'rel', 'stylesheet' );
            s.setAttribute( 'type', 'text/xml' );
            s.setAttribute( 'href', src);
            document.body.appendChild( s );
    }
};

Kemudian panggil dari halaman Anda sebagai berikut;

 window.onload = function(){
    Email.apikey = "-- Your api key ---";
    Email.Send("to@domain.com","from@domain.com","Sent","Worked!");
 }

Saya akan melakukannya dengan perpustakaan SMTPJ . Ia menawarkan enkripsi ke kredensial Anda seperti nama pengguna, kata sandi, dll.

Tidak ada jawaban langsung untuk pertanyaan Anda karena kami tidak dapat mengirim email hanya menggunakan javascript, tetapi ada cara untuk menggunakan javascript untuk mengirim email kepada kami:

1) menggunakan api untuk dan memanggil api melalui javascript untuk mengirim email kepada kami, misalnya https://www.emailjs.com mengatakan bahwa Anda dapat menggunakan kode seperti di bawah ini untuk memanggil api mereka setelah beberapa pengaturan:

var service_id = 'my_mandrill';
var template_id = 'feedback';
var template_params = {
name: 'John',
reply_email: 'john@doe.com',
message: 'This is awesome!'
};

emailjs.send(service_id,template_id,template_params);

2) membuat kode backend untuk mengirim email untuk Anda, Anda dapat menggunakan kerangka backend untuk melakukannya untuk Anda.

3) menggunakan sesuatu seperti:

window.open('mailto:me@http://stackoverflow.com/');

yang akan membuka aplikasi email Anda, ini mungkin masuk ke popup yang diblokir di browser Anda.

Secara umum, mengirim email adalah tugas server, jadi harus dilakukan dalam bahasa backend, tetapi kita dapat menggunakan javascript untuk mengumpulkan data yang diperlukan dan mengirimkannya ke server atau api, juga kita dapat menggunakan aplikasi paritas ketiga dan membukanya via browser menggunakan javascript seperti yang disebutkan di atas.

Jawaban singkatnya adalah Anda tidak dapat melakukannya menggunakan JavaScript saja. Anda memerlukan penangan sisi server untuk terhubung dengan server SMTP untuk benar-benar mengirim surat. Ada banyak skrip surat online, seperti ini untuk PHP:

Gunakan Ajax untuk mengirim permintaan ke skrip PHP, periksa bahwa bidang yang diperlukan tidak kosong atau salah menggunakan js juga menyimpan catatan pengiriman surat oleh siapa dari server Anda.

function sendMail() is good for doing that.

Periksa apakah ada kesalahan yang ditemukan saat mengirim surat dari skrip Anda dan lakukan tindakan yang sesuai.
Untuk mengatasinya misalnya jika alamat email salah atau email tidak terkirim karena masalah server atau sedang dalam antrian laporkan ke pengguna segera dan mencegah multi pengiriman email yang sama berulang-ulang. Dapatkan respons dari skrip Anda Menggunakan jQuery GET dan POST

$ .get (URL, callback); $ .post (URL, callback);

Karena semua ini adalah info yang luar biasa, ada api kecil bernama Mandrill untuk mengirim surat dari javascript dan berfungsi dengan baik. Anda bisa mencobanya. Inilah sedikit tutorial untuk memulai.

Kirim email menggunakan JavaScript atau jQuery

var ConvertedFileStream;
var g_recipient;
var g_subject;
var g_body;
var g_attachmentname;


function SendMailItem(p_recipient, p_subject, p_body, p_file, p_attachmentname, progressSymbol) {

    // Email address of the recipient 
    g_recipient = p_recipient;

   // Subject line of an email
    g_subject = p_subject;

   // Body description of an email
    g_body = p_body;

    // attachments of an email
    g_attachmentname = p_attachmentname;

    SendC360Email(g_recipient, g_subject, g_body, g_attachmentname);

}

function SendC360Email(g_recipient, g_subject, g_body, g_attachmentname) {
    var flag = confirm('Would you like continue with email');
    if (flag == true) {

        try {
            //p_file = g_attachmentname;
            //var FileExtension = p_file.substring(p_file.lastIndexOf(".") + 1);
           // FileExtension = FileExtension.toUpperCase();
            //alert(FileExtension);
            SendMailHere = true;

            //if (FileExtension != "PDF") {

            //    if (confirm('Convert to PDF?')) {
            //        SendMailHere = false;                    
            //    }

            //}
            if (SendMailHere) {
                var objO = new ActiveXObject('Outlook.Application');

                var objNS = objO.GetNameSpace('MAPI');

                var mItm = objO.CreateItem(0);

                if (g_recipient.length > 0) {
                    mItm.To = g_recipient;
                }

                mItm.Subject = g_subject;

                // if there is only one attachment                 
                // p_file = g_attachmentname;
                // mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);

                // If there are multiple attachment files
                //Split the  files names
                var arrFileName = g_attachmentname.split(";");
                 // alert(g_attachmentname);
                //alert(arrFileName.length);
                var mAts = mItm.Attachments;

                for (var i = 0; i < arrFileName.length; i++)
                {
                    //alert(arrFileName[i]);
                    p_file = arrFileName[i];
                    if (p_file.length > 0)
                    {                     
                        //mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);
                        mAts.add(p_file, i, g_body.length + 1, p_file);

                    }
                }

                mItm.Display();

                mItm.Body = g_body;

                mItm.GetInspector.WindowState = 2;

            }
            //hideProgressDiv();

        } catch (e) {
            //debugger;
            //hideProgressDiv();
            alert('Unable to send email.  Please check the following: \n' +
                    '1. Microsoft Outlook is installed.\n' +
                    '2. In IE the SharePoint Site is trusted.\n' +
                    '3. In IE the setting for Initialize and Script ActiveX controls not marked as safe is Enabled in the Trusted zone.');
        }
    }
  }