使用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消息并将其发送。

希望能有所帮助。