如何使用 jQuery 和 POST 发送电子邮件

Question

更新：最终的工作代码位于问题的最底部，我留下了其余代码，因此您可以看到该过程，希望它对未来的人有所帮助。

我正在尝试仅使用 jQuery 和外部 php 文件向自己发送电子邮件（正在工作），但是，电子邮件没有接收任何数据。我有以下代码。

HTML

<section>
    <form enctype="multipart/form-data">
        <fieldset class="margin-b">
            <legend>Contact Me</legend>
            <label for="form_name">Name:<input name="form_name" id="form_name" type="text" value="" required autofocus ></label>
            <label for="form_email">Email:<input type="email" name="form_email" id="form_email" value=""></label>
            <label for="form_msg">Message:<textarea name="form_msg" id="form_msg" rows="5"></textarea></label>
        </fieldset>
        <input type="submit" name="submit" id="submit" value="Submit">
    </form>
</section>

JS

var data = {
  name: $("#form_name").val(),
  email: $("#form_email").val(),
  message: $("#form_message").val()
};
$.ajax({
  type: "POST",
  url: "email-php.php",
  data: data,
  success: function(){
    $('.success').fadeIn(1000);
  }
});

PHP

<?php
if($_POST){
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];

  //send email
  mail("email@domain.com", "From: " .$email, $message);
}
?>

编辑：我从 Stack Overflow 上的各种答案中获取了上述内容，但无法弄清楚我错过了什么或做错了什么。我从这个问题中提取了大部分内容jQuery AJAX form using mail() PHP script sends email, but POST data from HTML form is undefined

更新：在下面@inailo 的建议之后，我已将所有内容更改为以下内容，现在我根本没有收到电子邮件。这绝对看起来是更好的选择，所以我想让它工作。

HTML

    <section>
    <form enctype="multipart/form-data" id="frmemail">
        <fieldset class="margin-b">
            <legend>Contact Me</legend>
            <label for="form_name">Name:<input name="form_name" type="text" value="" required autofocus ></label>
            <label for="form_email">Email:<input type="email" name="form_email" value=""></label>
            <label for="form_msg">Message:<textarea name="form_msg" rows="5"></textarea></label>
        </fieldset>
        <input type="submit" name="submit" id="submit" value="Submit">
    </form>
</section>

JS

$.ajax({
  type: "POST",
  url: "email-php.php",
  data: $("#frmemail").serialize(),
  success: function(){
    $('.success').fadeIn(1000);
  }
});

PHP

<?php
if(isset($_POST['name'],$_POST['email'],$_POST['message'])){
  $name = $_POST['form_name'];
  $email = $_POST['form_email'];
  $message = $_POST['form_msg'];

  //send email
  mail("landon@thecallfamily.com", "From: " .$email, $message);
}
?>

最终工作代码

HTML

<section>
  <form enctype="multipart/form-data" id="frmemail">
    <fieldset class="margin-b">
      <legend>Contact Me</legend>
      <label for="form_name">Name:<input name="form_name" type="text" value="" required autofocus ></label>
      <label for="form_email">Email:<input name="form_email" type="email" value=""></label>
      <label for="form_msg">Message:<textarea name="form_msg" rows="5"></textarea></label>
    </fieldset>
    <input type="submit" name="submit" id="submit" value="Submit">
  </form>
</section>

JS

$(document).ready(function() {
  $('#frmemail').submit(function(event) {
    $.ajax({
      type: 'POST',
      url: 'email-php.php',
      data: $('#frmemail').serialize(),
      success: function() {
        $('.success').fadeIn(1000)
      }
    })
  })
})

PHP

<?php
$name = $_POST['form_name'];
$email = $_POST['form_email'];
$message = $_POST['form_msg'];

$to = "landon@thecallfamily.com";
$subject = "RIA Emails";
$body = "Name: ".$name."\nEmail: ".$email."\nMessage: ".$message;
$headers = "From: " . $email;

//send email
mail($to, $subject, $body, $headers);
?>

Answer 1

您试图通过使用错误的 id 来获取 textarea 值，它应该是：

message: $("#form_msg").val()

不是

message: $("#form_email").val()

并在 php 文件中，替换以下内容：

$message = $_POST['text'];

与

$message = $_POST['message'];

就是这样:)

Answer 2

试试这个，（假设您在输入表单上输入了 id 名称） 查询：

$(document).ready(function(){
    $('#submit').on('click',function(){
       var name = $('#name').val(),
       var name = $('#email').val(),
       var name = $('#message').val();

        $.ajax({
        type: "POST",
        url: "email-php.php",
        data: {name:name,email:email,message:message},
        success: function(data){
             alert(data);
        }
        });
    });     
});

PHP：

if(isset($_POST['name'],$_POST['email'],$_POST['message'])){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message']; 

    echo $name; // then echo $email and then $message
}

Answer 3

您有多个错误，首先您使用元素 ID 来获取数据：

name: $("#form_name").val(),
email: $("#form_email").val(),
message: $("#msg_text").val()

但输入元素本身没有定义 id 属性。

其次，您传递的是姓名、电子邮件和消息，但在您的 PHP 中您使用的是姓名、电子邮件和文本：

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['text'];

但是，即使正确所有这些都不必要地复杂，您也可以改为 serialize 表单：

在 HTML 中，给表单添加一个 id：

<form enctype="multipart/form-data" id="frmemail">

在 JS 中，取出表单并序列化它：

$(document).ready(function(){
  $("#frmemail").submit(function(event){
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: "email-php.php",
      data: $("#frmemail").serialize(),
      success: function(){
        $('.success').fadeIn(1000);
      }
    });
  });
});

在 PHP 中只需使用元素名称，您不需要它们的 id：

$name = $_POST['form_name'];
$email = $_POST['form_email'];
$message = $_POST['form_msg'];