使用ajax提交郵件表單的正確方法？ - 沒有JQuery

Question

我想處理一個PHP的mailform與AJAX。這是一個簡單的形式，發送一條消息與用戶電話號碼等我的電子郵件

我沒有經驗的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) 
?> 

Answer 1

解決這樣的：

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

Answer 2

正如其他人所說，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的定義。