我似乎无法让我的表格成功通过电子邮件发送

Question

这是我第一次创建一个结合 AJAX、JavaScript、PHP 和 HTML 的网站。基本上，当您单击带有表格的“联系我”时，我会弹出一个模式。我选择使用 AJAX 的原因是我不希望页面刷新或删除模式。我只是想让它在模态之后说一些简单的事情。

我的问题是，一旦我点击提交，我就没有收到来自表单的电子邮件，当我跟踪从我的服务器发送到我的地址的电子邮件时，它们甚至都没有出现。这不是我第一次构建 Web 表单或使用 PHP/HTML，所以我确信问题出在 AJAX 上。

所以，这就是我所拥有的，我似乎无法弄清楚为什么它不起作用......

PHP：

<?php
$email_to="conrad.h.appel.iv@gmail.com";
$email_subject="Form Submission";

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

function clean_string($string)
{
    $bad = array("content-type","bcc:","to:","cc:","href");
    return str_replace($bad,"",$string);
}

$email_message .= "Name: ".clean_string($name)."\n";
$email_message .= "E-Mail Address: ".clean_string($email)."\n";
$email_message .= "Message: ".clean_string($message);

$headers='From: '.$email."\r\n".'Reply-To: '.$email."\r\n".'X-Mailer: PHP/'.phpversion();
@mail($email_to,$email_subject,$email_message,$headers);
die();
?>

Javascript/AJAX：

function submitForm() {
    var request;
    var name = $('#name').val();
    var email = $('#email').val();
    var message = $('#message').val();
    console.log(name);
    console.log(email);
    console.log(message);

    var the_data = "name="+name+"&email="+email+"&message="+message;

    if(window.XMLHttpRequest)
    {
        request = new XMLHttpRequest();
    } else {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    /* My attempt to try some jQuery.... Didn't work either
    $.ajax({
        type: "POST",
        url: "formsubmit.php",
        data: { name: $('#name'), email: $('#email'), message: ('#message') }           
            })*/

    request.open("POST","formsubmit.php", true);
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(the_data);
    $('#contactform').fadeOut();
    $('#contactsuccess').fadeIn();
}

还有提交按钮，以防万一……

<button type="submit" class="btn btn-primary" onClick="submitForm()"><i class="icon-ok icon-white"></i> Submit!</button>

编辑：另外，我在使用相同的代码时遇到了问题，因为它刷新了页面，这正是我不希望它做的事情。因此，我看不到我的 Javascript 控制台或任何东西。我认为 AJAX 会删除刷新，但它没有。我该如何解决这个问题？

Answer 1

当您使用 jQuery 获取输入值时，请使用 $.ajax() 而不是 XMLHttpRequest。您的第一种方法（现在已评论）不起作用，因为您使用的是对象而不是值（ $('#name') vs $('#name').val() ）。

页面将重新加载，因为没有返回值。使用

<button type="submit" class="btn btn-primary" onClick="return submitForm();"><i class="icon-ok icon-white"></i> Submit!</button>

并在函数末尾添加return false;。

要查看您的 PHP 脚本是否有问题，我建议如下：

1. 在文件开头添加error_reporting(E_ALL);
2. 删除您的邮件功能的@

3. 在你的 JS 函数中：

   $.ajax({
       [...]
       success: function(msg) {
           alert(msg);
       }
   });