使用 PHP 和 AJAX 发送电子邮件表单答案

【问题标题】：Sending e-mail form using PHP and AJAX使用 PHP 和 AJAX 发送电子邮件表单
【发布时间】：2015-08-10 03:56:28
【问题描述】：

我的网站上有联系表。它将消息发送到电子邮件。我尝试在不使用 AJAX 重新加载页面的情况下执行此操作，但 AJAX 似乎不起作用：消息已发送但页面仍重定向到 call-form.php。我的代码中有什么不正确的地方？（包括jQuery）

HTML

<form name="freeCall" action="<?php bloginfo(template_url); ?>/mail/call-form.php" method="post" class="popover-form" id="free-call-form">  
    <label for="name1">Name</label><span class="pull-right close">&times;</span><input placeholder="Name" name="call-name" type="text" id="name1" >  
    <label for="phone">Phonenumber</label><input name="phone" type="text" value="" placeholder="+375" id="phone" >    
    <input type="submit" value="Call me back" >       
</form>

PHP - call-form.php

<?
if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){ 
        $to = 'test@gmail.com';
        $subject = 'Callback';
        $message = '
                <html>
                    <head>
                        <title>Call me back</title>
                    </head>
                    <body>
                        <p><b>Name:</b> '.$_POST['call-name'].'</p>
                        <p><b>Phonenum:</b> '.$_POST['phone'].'</p>                        
                    </body>
                </html>'; 
        $headers  = "Content-type: text/html; charset=utf-8 \r\n"; 
        $headers .= "From: Site <info@mail.com>\r\n"; 
        mail($to, $subject, $message, $headers); 
}
?>

$(function () {    
      $("#free-call-form").submit(function () { 
        var form_data = $(this).serialize(); 
        $.ajax({
          type: "POST", 
          url: "call-form.php", 
          data: form_data,
          success: function () {
            alert("It's OK!");
          }
        });
      }); 
});

【问题讨论】：

action="<?php bloginfo(template_url); ?>/mail/call-form.php" 在 AJAX 中是没用的
完全没用？ php文件是不必要的？？
你忘记了一些事情，比如你的ajax返回。我正在写一个有效的答案

标签： javascript php jquery ajax forms

【解决方案1】：

好的，首先当你进行 AJAX 调用时，你必须有办法知道你的 PHP 是否返回了一些东西（对调试很有用）。

那么，当使用 AJAX 提交表单时，标签 action="" 就不需要了。

最后，为了防止在进行 AJAX 调用时发送表单，请在此处添加 e.preventDefault() 和名为 e 的事件，就像在我的示例中一样。

我已经改进了您的代码，使其更符合最新标准。

HTML：

<form name="freeCall" method="post" class="popover-form" id="free-call-form">  
  <label for="name1">Name</label><span class="pull-right close">&times;</span><input placeholder="Name" name="call-name" type="text" id="name1" >  
  <label for="phone">Phonenumber</label><input name="phone" type="text" value="" placeholder="+375" id="phone" >    
  <input type="submit" value="Call me back" >

JS：

$(function () {    
  $("#free-call-form").submit(function (e) {
    e.preventDefault();
    var form_data = $(this).serialize(); 
    $.ajax({
      type: "POST", 
      url: "call-form.php",
      dataType: "json", // Add datatype
      data: form_data
    }).done(function (data) {
        console.log(data);
        alert("It's OK!");
    }).fail(function (data) {
        console.log(data);
    });
  }); 
});

还有 PHP：

if((isset($_POST['call-name']))&&(isset($_POST['phone'])&&$_POST['phone']!="")){ 
  $to = 'test@gmail.com';
  $subject = 'Callback';
  $message = '
        <html>
            <head>
                <title>Call me back</title>
            </head>
            <body>
                <p><b>Name:</b> '.$_POST['call-name'].'</p>
                <p><b>Phonenum:</b> '.$_POST['phone'].'</p>                        
            </body>
        </html>'; 
  $headers  = "Content-type: text/html; charset=utf-8 \r\n"; 
$headers .= "From: Site <info@mail.com>\r\n"; 
mail($to, $subject, $message, $headers);

  echo json_encode(array('status' => 'success'));
} else {
  echo json_encode(array('status' => 'error'));
}

有了echo json_encode，您就知道AJAX 调用的返回值是什么。更好

【讨论】：

【解决方案2】：

您没有阻止默认提交操作 -

$("#free-call-form").submit(function (event) { // capture the event
    event.preventDefault();  // prevent the event's default action

【讨论】：

【解决方案3】：

返回 false 或阻止事件的默认行为应该适合您。

旧的 .submit() 示例，现在是 .on('eventName'); 的别名；并使用 return false 来避免表单提交。;

 $("#free-call-form").submit(function () { 
    var form_data = $(this).serialize(); 
    $.ajax({
        type: "POST", 
        url: "call-form.php", 
        data: form_data,
        success: function () {
          alert("It's OK!");
      }
    });
    return false;
});

使用 .on('eventName') 和使用 e.preventDefault() 来避免表单提交的示例。

$("#free-call-form").on('submit', function (e) { 
    e.preventDefault();
    var form_data = $(this).serialize(); 
    $.ajax({
        type: "POST", 
        url: "call-form.php", 
        data: form_data,
        success: function () {
          alert("It's OK!");
      }
    });
});

来自 Jquery .submit() 文档：此方法是 .on( "submit", handler ) 在第一个变体中，> 和 .trigger( "submit" ) 在第三个。

另外，你会考虑不直接使用用户输入，它不会在这个确切的上下文中引起问题（或者可能是的），但是通过你的实际方法，他们可以更改邮件标记或在那里添加一些奇怪的东西，甚至是脚本，你会考虑转义、验证或限制它。

正如 zLen 在 cmets 中指出的那样：

表单标记中的操作不是必需的，因为您没有使用它，您可以将其删除：

action="<?php bloginfo(template_url); ?>/mail/call-form.php"

【讨论】：

请解释为什么您描述了两次提交？
当然。在第一个示例中，我复制了完全相同的代码并添加了 return false 语句；那应该工作。在我的第二个示例中，我使用另一种绑定提交按钮的方式，正如我在评论中指出的那样，您可以避免 Jquery 在后台调用。同样在第二个示例中，我使用不同的方式来避免提交表单，我使用 e.preventDefault();避免提交事件的默认行为“提交”。
啊，我以为这不是两个不同的例子）谢谢！

【解决方案4】：

正在发生的事情是您的表单正在提交，实际上并不是 AJAX 调用正在执行此操作。要修复它，请添加

return false;

在 submit 函数的末尾，这样浏览器就不会提交表单，并且 AJAX 调用会正常进行。

【讨论】：