使用AJAX从表单输入发送电子邮件

时间:2019-01-07 00:59:02

标签: javascript jquery html ajax

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

2 个答案:

答案 0 :(得分:0)

也同意,Ajax只是一种将数据发送到Web服务器的方法,它无法直接发送邮件。但是,您可以在服务器中实现邮件发送功能,可以通过Ajax激活它。

答案 1 :(得分:0)

  

AJAX = A 同步的 J avaScript A 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,并且邮件正文将包含表单字段条目,例如:{{1} }。

如果可以接受,您也可以在脚本中执行此操作。

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

用户此时只能发送电子邮件。这并不是最好的方法。确实可以。

其他所有操作都需要服务器API,您可以将数据发布到该服务器API,然后Web服务器将构造SMTP消息并将其发送。

希望有帮助。