如何通過以下方式提交表單：PHP發送電子郵件，使用Ajax進行屏幕刷新，然后在不進行屏幕刷新的情況下在表單旁邊發布消息？

Question

當用戶單擊“提交”按鈕時，我需要：（1）使用PHP通過電子郵件發送給我的表單數據，而無需刷新頁面。 （2）使用Ajax在表單旁邊顯示一條感謝消息。

我大部分工作了。 我不確定要使頁面不刷新所需的編碼，因為PHP腳本通過電子郵件將表單數據發送給我。 另外，一旦PHP腳本運行完畢，如何使Ajax代碼運行？ 我已經做了大量研究，發現很多人使用jQuery來解決這個問題。 但是，我不是僅將JavaScript用於jQuery。 我知道我已經接近了，但是需要一些幫助。 到目前為止，這是我的代碼：

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：單擊forment div時，我可以使用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;
      } 
    }
  }
})();

謝謝你的幫助。 :)

Answer 1

哇噢！ 我沒有使用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編碼時，我了解了它在做什么。