使用ajax提交邮件表单的正确方法？ - 没有JQuery

I'm trying to handle a php mailform with ajax. It's a simple form that sends a message to my e-mail with the users phonenumber etc.

我正在尝试使用ajax处理php mailform。这是一个简单的表单,用户的电话号码等向我的电子邮件发送消息。

I'm not experienced with php at all but I got it to send me mail using a regular submit and then returning to the index page.

我根本没有使用php的经验,但是我让它使用常规提交向我发送邮件然后返回索引页面。

As this does not provide any feedback to the user this isn't working for me. I've found some examples using JQuery. I've also seen people using both GET and POST. I'm confused now how I should proceed.

由于这不向用户提供任何反馈,这对我不起作用。我发现了一些使用JQuery的例子。我也看到人们同时使用GET和POST。我现在很困惑,我该怎么办。

The JQuery version of what I'm trying to achieve would look similar to this I guess.

我想要实现的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 = “[e-mail]”;
$message =” You received  a mail from “.$mail;
$message .=” Text of the message : “.$text;
mail($to, $subject,$message)
?>

2 个解决方案

#1

As the others said, jQuery is better than the natural way of using AJAX. But for the answer, firstly you should create a XmlHttp object in JavaScript. Then you can send your value to your page with the proper GET or POST method. After that, you can track the process by getting the state of posted request which it's implemented in stateChanged function. That's All!

正如其他人所说,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;
}

I think it's better to see the definition of XmlHttpObject.

我认为最好看一下XmlHttpObject的定义。

#2

Solved it like this:

解决它像这样:

<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;
  }
}
?>