我如何通过:PHP发送电子邮件，使用Ajax无屏幕刷新，并在表单旁边发布消息，没有屏幕刷新 - How do I submit form via: PHP sending email, Using Ajax for no screen refresh, and post a message next to form with no screen refresh?

当用户点击提交按钮时，我需要:(1)使用PHP将表单数据通过电子邮件发送给我，无需刷新页面。(2)使用Ajax在表单旁边显示感谢消息。

我已经使它大部分工作了。我不确定我需要什么编码使页面不刷新PHP脚本是通过电子邮件发送表单数据给我。另外，一旦PHP脚本运行完毕，如何让Ajax代码运行呢?我做了大量的研究，发现很多人使用jQuery来解决这个问题。但是，我没有使用jQuery，只是使用JavaScript。我知道我快成功了，但我需要一些帮助。下面是我到目前为止的代码:

PHP -只是发送表单数据给我通过电子邮件:

<?php
$persons_name = $_POST['fname'];
$email_address = $_POST['email'];
$comments_questions = $_POST['moreinfo'];
$to = 'fireplace_tea@yahoo.com';
$subject = 'Email - JulesMyers.com';
$msg = "$persons_name has sent an email.'n" .
"You can reply to $persons_name at: $email_address'n" .
"Question or Comment: $comments_questions'n";
mail($to, $subject, $msg, 'From: ' . $email_address);
?>

HTML表单:

<form id="contactMe" method="post" action="contact.php">
 <input type="text" class="inputElement initialColor" name="fname" id="fname">
 <input type="text" class="inputElement initialColor" name="email" id="email">
 <textarea rows="6" class="inputElement" name="moreinfo" id="moreinfo"> </textarea>
 <input type="submit" class="sendButton" id="submitbutton" value="Send">
</form> 
<div class="errormsg"></div>
<div class="formsent"></div>

Ajax:当我单击formsentdiv时，Ajax工作，但我需要它在PHP脚本运行之后运行。有什么事件我可以收听吗?

(function() {
  var httpRequest;
  var b = document.querySelector('.formsent');
  b.onclick = function() { makeRequest('thanks.txt'); };
  function makeRequest(url) 
  {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('POST', url);
    httpRequest.send();
  }
  function alertContents() {
    if (httpRequest.readyState === 4) 
    {
      if (httpRequest.status === 200) 
      {
        /*alert(httpRequest.responseText);*/
        b.innerHTML = httpRequest.responseText;
      } 
    }
  }
})();

谢谢你的帮助。:)

哇!我发现它没有使用jQuery…换句话说，我做了很长的一段路。我做了大量的研究和尝试。它的工作原理是，当用户单击标有"提交JavaScript'DOM"的按钮获取并存储来自三个表单字段的值时，XMLhttpRequest'AJAX获取JavaScript'DOM存储的值并将它们发送到PHP文件，然后PHP文件向我发送带有表单数据的电子邮件，最后是httpRequest。responseText在表单旁边放一条感谢消息，供用户查看。所有这些都可以在不刷新页面的情况下完成。是啊!下面是有效的代码:

HTML

<form id="contactMe">
 <input type="text" class="inputElement initialColor" name="fname" id="fname">
 <input type="text" class="inputElement initialColor" name="email" id="email">
 <textarea rows="6" class="inputElement" name="moreinfo" id="moreinfo"> </textarea>
 <input type="button" class="sendButton" id="submitbutton" value="Send">
</form> 
<div class="errormsg"></div>
<div class="formsent"></div>

JavaScript

function makeRequest()
{
    var httpRequest;
    var personName = document.getElementById('fname').value;
    var emailAddress = document.getElementById('email').value;
    var comments = document.getElementById('moreinfo').value;
    if (window.XMLHttpRequest) { 
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { 
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open("GET", "contact.php?name="+personName+"&email="+emailAddress+"&comment="+comments, true);
    httpRequest.send();
    function alertContents() 
      {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) 
        {
            var thankYou = document.querySelector('.formsent');
            thankYou.innerHTML = httpRequest.responseText;
            var clearForm = document.getElementById('contactMe');
            clearForm.reset();
        }
      }
}

PHP

<?php
$name = $_GET['name'];
$email = $_GET['email'];
$comment = $_GET['comment'];
$to = 'email@fakeDomain.fake';
$subject = 'Email From Website Form';
$msg = "$name has sent an email.'n" .
"You can reply to $name at: $email'n" .
"Question or Comment: $comment'n";
mail($to, $subject, $msg, 'From: ' . $email); 
echo "Thank you " . $name . ".<br>";
echo "The form has been sent.";
?>

最难的部分是弄清楚如何将变量从JavaScript传递到PHP。我花了很多时间来找到真正好的完整的例子，并找到它是如何工作的解释。以下是我发现非常有用的一些资源:
tutorials2learn.com/tutorials/scripts/ajax-scripts/submit-html-form-ajax.html
javascriptkit.com/dhtmltutors/ajaxgetpost.shtml
javascriptkit.com/dhtmltutors/ajaxgetpost2.shtml
openjs.com/articles/ajax_xmlhttp_using_post.php
webcheatsheet.com/php/passing_javascript_variables_php.php
stackoverflow.com/questions/13840429/reference-why-does-the-php-or-other-server-side-code-in-my-javascript-not-wor

注意事项:
*我使用AJAX (XMLHttpRequest对象)打开JavaScript和PHP之间的通信线路。
*整个操作可以用jQuery用更少的代码行来完成。但是，我想知道它是如何长期运作的。现在，当我看jQuery代码时，我明白了它在做什么。