Отправка электронной почты из формы ввода с использованием 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 = A синхронный J avaScript A nd X ML.

AJAX не является языком программирования.

AJAX просто использует комбинацию:

• Встроенный в браузер объект XMLHttpRequest (для запроса данных с веб-сервера)
• JavaScript и HTML DOM (для отображения или использования данных)

Нет способа отправить электронное письмо, используя только AJAX, и нет способа отправить электронное письмо, используя только JavaScript. Вы можете использовать HTML или JavaScript вместе с языком сценариев на стороне сервера, таким как CGI, PHP или ASP.NET, для отправки электронной почты с вашего веб-сервера (или ретранслятора SMTP).

Тем не менее, вы можете сделать так, чтобы браузер помог пользователю отправить электронное письмо с помощью его почтовой программы. Это делается путем установки определенного атрибута формы.

Пример * ** 1029 тысяча двадцать-восемь * <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.

Если это приемлемо, вы можете сделать это тоже в своем скрипте.

// 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, к которому вы могли бы отправлять данные, а веб-сервер затем создал бы SMTP-сообщение и отправил бы его.

Надеюсь, это поможет.

Answer 2

согласен также, Ajax - это всего лишь метод отправки данных на веб-сервер, он не может отправлять почту напрямую. Однако вы можете реализовать функцию отправки почты на сервере, которую вы можете активировать через Ajax.