使用ajax提交邮件表单的正确方法?-没有JQuery - Correct way to submit a mail form using ajax? - no JQuery

我正在尝试用ajax处理php邮件表单。这是一个简单的表单，它向我的电子邮件发送一条带有用户电话号码等的信息。

我对php没有任何经验，但我让它使用常规提交向我发送邮件，然后返回索引页面。

由于这不会向用户提供任何反馈，所以这对我来说不起作用。我发现了一些使用JQuery的例子。我也见过有人同时使用GET和POST。我现在不知道该怎么办。

我想，我试图实现的JQuery版本看起来与此类似。

var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
$.ajax({
  type: "POST",
  url: "mail.php",
  data: dataString,
  success: function() {
    $('#myForm').html("<div id='response'></div>");
    $('#response').html("<h2>Contact Form Submitted!</h2>");
  }
});
<?php
$mail = $_POST['email '];
$name = $_POST['name'];
$subject = 'new submit';
$text = $_POST['message'];
$to = “yourmail@domain.com”;
$message =” You received  a mail from “.$mail;
$message .=” Text of the message : “.$text;
mail($to, $subject,$message)
?>

正如其他人所说，jQuery比使用AJAX的自然方式要好。但对于答案，首先应该用JavaScript创建一个XmlHttp对象。然后，您可以使用适当的GET或POST方法将您的值发送到页面。之后，您可以通过获取在stateChanged函数中实现的已发布请求的状态来跟踪流程。仅此而已！

var xmlhttp
function retrive(url, str){
    xmlhttp = GetXMLHTTPObject();
    if(xmlhttp==null){
        alert("Your browser doesn't support the ajax.");
        return;
    }
    var script=url;
    script=script+"?value="+str;
    xmlhttp.onreadystatechange = stateChanged;
    xmlhttp.open("GET",script,true);
    xmlhttp.send(null); 
}
function stateChanged(){
    if(xmlhttp.readyState == 0){
        document.getElementById("result").innerHTML = "not initialized";
    }
    if(xmlhttp.readyState == 1){
        document.getElementById("result").innerHTML = "has been set up";
    }
    if(xmlhttp.readyState == 2){
        document.getElementById("result").innerHTML = "has been sent";
    }
    if(xmlhttp.readyState == 3){
        document.getElementById("result").innerHTML = "in process";
    }
    if(xmlhttp.readyState == 4){
        document.getElementById("result").innerHTML = xmlhttp.responseText;
    }
}
function GetXMLHTTPObject(){
    if(window.XMLHttpRequest){
        //code for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    }
    if(window.ActiveXObject){
        //code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}

我认为最好查看XmlHttpObject的定义。

这样解决：

<form id="form" method="post" name="mailform" action="mail.php" onsubmit="mail(); return false;">
    <p>
        <label for='name'>Stuff</label><br>
        <input type="text" name="stuff">
    </p>
    <input type="submit" name="submit" value="Send">
</form>
<p id="result" style="display: none">
<img src="images/succes.png"><br>
Thank you
</p>
/*----------------------------*/
function mail() {
var form = document.getElementById("form");
var name = form.name.value; 
var email = form.email.value; 
var phone = form.phone.value; 
var message = form.message.value; 
var valid = true;
if (!name) {form.name.style.backgroundColor = '#FF9481'; valid = false; }
else {form.name.style.backgroundColor = '';}
if (!email && !phone) {form.email.style.backgroundColor = '#FF9481'; form.phone.style.backgroundColor = '#FF9481'; valid = false;}
else {form.email.style.backgroundColor = ''; form.phone.style.backgroundColor = '';}
if (!message) {form.message.style.backgroundColor = '#FF9481'; valid = false;}
else {form.message.style.backgroundColor = '';}
if (email) {
    var patt=/'b[A-Z0-9._%+-]+@[A-Z0-9.-]+'.[A-Z]{2,4}'b/gi;
    var result=patt.test(email);
    if (!result) {form.email.style.backgroundColor = '#FF9481'; valid = false;}
    else form.email.style.backgroundColor = '';
    }
if (phone) {
    var patt=/[^0-9|'-| ]/g;
    var result=patt.test(phone);
    if (result) {form.phone.style.backgroundColor = '#FF9481'; valid = false;}
    else form.phone.style.backgroundColor = '';
    }
if (!valid) return false;
var datastr = 'name='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            if (xmlhttp.responseText == "ok") {
            form.style.display = 'none';
            document.getElementById("result").style.display = '';
            }
            else {
            form.message.value= "That doesn't seem right";
            }       
        }
  }
xmlhttp.open("GET","mail.php?" + datastr,true);
xmlhttp.send();
}
/*----------------------------*/
<?php
$name = $_GET['name'];
$etc...
if(IsInjected($name)||IsInjected($visitor_email)||IsInjected($phone)||IsInjected($message)) 
{
    echo "Something fishy going on?";
    exit;
}
[...]
mail($to,$email_subject,$email_body,$headers);
echo "ok";
function IsInjected($str)
{
  $injections = array('('n+)',
              '('r+)',
              '('t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
?>