使用AJAX從表單輸入發送電子郵件

Question

我是AJAX的新手，我試圖在用戶將電子郵件地址輸入表單並單擊“提交”后，使用它發送自動電子郵件。 我建立了一個表單，用戶可以在其中輸入信息，包括姓名和電子郵件。 他們單擊提交后，輸入的電子郵件地址將收到一封電子郵件。

很抱歉，如果這是一個不好的問題，或者以前曾被問過，但我一直在努力尋找答案。

 // Dummy function function getCookie(arg) { return arg } $("form.ajax").click(function(e) { alert("Starting Ajx"); var dealerID = getCookie("dealerID"); var userID = getCookie("userID"); $.ajax({ type: "POST", url: "https://example.org", headers: { 'X-Location-Id': dealerID, 'X-Id': userID }, data: { id: $(this).val(), // < note use of 'this' here access_token: $("#access_token").val() }, success: function(result) { alert('ok'); }, error: function(result) { alert('error'); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="ajax" method="POST" action=""> <p class="error-message" id="error-message"></p> <select name="title" id="title" class="wrap-input2 validate-input"> <option value="">Title</option> <option value="Mr">Mr</option> <option value="Ms">Ms</option> <option value="Miss">Miss</option> <option value="Mrs">Mrs</option> <option value="Sir">Sir</option> <option value="Dr">Dr</option> <option value="Prof">Prof</option> <option value="Mstr">Mstr</option> </select> <div class="wrap-input2 validate-input"> <input class="input2" name="forename" id="forename"> </div> <div class="wrap-input2 validate-input"> <input class="input2" name="surename" id="surename" `> </div> <div class="wrap-input2 validate-input"> <input class="input2" name="email" id="email" type="email" required> </div> <input class="spin" type="image" src="images/click.png" alt="Submit"> </form> 

Answer 1

同樣，Ajax只是將數據發送到Web服務器的一種方法，它無法直接發送郵件。 但是，您可以在服務器中實現郵件發送功能，可以通過Ajax激活它。

Answer 2

AJAX = A同步ĴavaScript 甲 ND X ML。

AJAX不是編程語言。

AJAX僅使用以下各項的組合：

• 瀏覽器內置的XMLHttpRequest對象（用於從Web服務器請求數據）
• JavaScript和HTML DOM（顯示或使用數據）

無法單獨使用AJAX發送電子郵件，也不能單獨使用JavaScript發送電子郵件。 您可以使用HTML或JavaScript以及服務器端腳本語言（例如CGI，PHP或ASP.NET）來從Web服務器（或SMTP中繼）發送電子郵件。

也就是說，您可以讓瀏覽器幫助用戶使用他們的電子郵件程序發送電子郵件。 這是通過設置特定的Form屬性來完成的。

例

<form action="mailto:someone@example.com" method="post" enctype="text/plain">
  Name:<br>
  <input type="text" name="name" /><br />
  E-mail:<br />
  <input type="text" name="mail" /><br />
  Comment:<br />
  <input type="text" name="comment" size="50" /><br /><br />
  <input type="submit" value="Send" />
  <input type="reset" value="Reset" />
</form>

提交表單后，瀏覽器會要求默認的電子郵件程序編寫一封電子郵件並將其定向到someone@example.com並且郵件正文將包含表單[name]=[value]\\r\\n條目，例如： [name]=[value]\\r\\n 。

如果可以接受，您也可以在腳本中執行此操作。

 // Dummy function function getCookie(arg) { return arg } $("form.ajax").submit(function(e) { console.log("Form Submission"); var dealerID = getCookie("dealerID"); var userID = getCookie("userID"); $("<input>", { type: "hidden", name: "location-id", value: dealerID }).appendTo(this); $("<input>", { type: "hidden", name: "user-id", value: userID }).appendTo(this); $(this).attr("action", "mailto:" + $("[name='email']").val() + "?cc=myemai@address.com&subject=Form%20Submission%20From%20Website"); return true }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="ajax" method="POST" action=""> <p class="error-message" id="error-message"></p> <select name="title" id="title" class="wrap-input2 validate-input"> <option value="">Title</option> <option value="Mr">Mr</option> <option value="Ms">Ms</option> <option value="Miss">Miss</option> <option value="Mrs">Mrs</option> <option value="Sir">Sir</option> <option value="Dr">Dr</option> <option value="Prof">Prof</option> <option value="Mstr">Mstr</option> </select> <div class="wrap-input2 validate-input"> <input class="input2" name="forename" id="forename"> </div> <div class="wrap-input2 validate-input"> <input class="input2" name="surename" id="surename" `> </div> <div class="wrap-input2 validate-input"> <input class="input2" name="email" id="email" type="email" required> </div> <input class="spin" type="image" src="images/click.png" alt="Submit"> </form> 

用戶只能在那時發送電子郵件。 這並不是最好的方法。 它確實可以工作。

其他任何操作都需要服務器API，您可以將數據過帳到該服務器API，然后Web服務器將構造SMTP消息並將其發送。

希望能有所幫助。