Javascript 如何通过以下方式提交表单：PHP发送电子邮件，使用Ajax不刷新屏幕，并在表单旁边发布消息而不刷新屏幕？

当用户单击提交按钮时，我需要： （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);
?>

---

谢谢你的帮助。：）

呜呼！我没有使用jQuery就解决了这个问题……换句话说，我做了很长一段路。我做了大量的研究和尝试。它的工作原理是，当用户单击标记为submit JavaScript\DOM的按钮时，从三个表单字段获取并存储值，然后XMLhttpRequest\AJAX获取JavaScript\DOM存储的值并将其发送到PHP文件，然后PHP文件向我发送一封包含表单数据的电子邮件，最后，httpRequest.responseText在表单旁边放一条感谢消息，供用户查看。所有这些都可以在不刷新页面的情况下完成。是 啊以下是有效的编码：

HTML

PHP

最困难的部分是找出如何将变量从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\u xmlhttp\u使用\u 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编码时，我理解了它在做什么

在httpRequest.send（）声明FormData之前，将您的联系人表单放入FormData中，用谷歌搜索很多示例。谢谢wayne，我正在研究这个。FormData是相对较新的，所以是否有一种更向后兼容的方法来实现这一点？iframe技巧。谷歌通过iframe发布表单。但是有点糟糕为什么不直接使用JQuery呢？对你来说，实现你想做的事情会简单得多。@TheTaxPayer:我可能最终会在我的网站上使用jQuery方式。但是，我想看看它是如何完成的，jQuery有点隐藏了这一点。到目前为止，我已经学到了很多东西。你可以问一下逻辑；很简单。提交表单时，使用JS函数对其进行验证，如果成功，则调用

AJAX

，并在该函数的

end

处返回false。在AJAX的success函数中，您会发出感谢消息。在后端，检索AJAX发送的数据，并使用mail函数发送邮件。邮件发送后，您将

echo

a

标记

状态，并在AJAX的成功功能中验证该状态。所以，这种通信不允许页面重新加载和发送邮件@marcus—我确实先做了表单验证，验证通过后，它会调用Ajax函数。另外，我注意到return false并不总是有效的（比如prevent default），而且我也不需要停止默认行为，因为我使用了type=“button”，而不是type=“submit”。@marcus-我对PHP不太了解。你为什么建议附和一面旗帜？flag的作用是什么？flag是用于标识结果的任何标识符。假设您使用

echo“success”或
回显为真<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>

(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;
      } 
    }
  }
})();

<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>

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
$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.";
?>