如何在聯繫表格中使用ajax

Question

我有一個簡單的聯繫表單，它有一些驗證。我已經搜索了Google幾個小時，並且發現了大量關於如何從各種事情創建聯繫人的東西，但我只是在尋找一些非常簡單的東西。我希望使用我的表單，因爲我希望添加一些ajax代碼來使頁面不會像現在這樣重新加載，並且在提交表單時顯示一個小動畫gif替換submit按鈕，然後顯示成功的訊息，我有。

<?php 
// define variables and set to empty values 
$error = ""; $successMessage = ""; 
$fname = $email = $message = ""; 

if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    if (empty($_POST["name"])) { 
    $error .= "First name is required.<br>"; 
    } else { 
    $fname = test_input($_POST["name"]); 
    // check if name only contains letters and whitespace 
    if (!preg_match("/^[a-zA-Z ]*$/",$fname)) { 
     $error .= "Only letters and white space allowed.<br>"; 
    } 
    } 

    if (empty($_POST["email"])) { 
    $error .= "Email is required.<br>"; 
    } else { 
    $email = test_input($_POST["email"]); 
    // check if e-mail address is well-formed 
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
     $error .= "Invalid email format.<br>"; 
    } 
    } 


    if (empty($_POST["message"])) { 
     $error .= "Message is required.<br>"; 
    } else { 
    $message = test_input($_POST["message"]); 
    } 

    if ($error != "") { 

      $error = '<div class="formerror" role="alert"><p><strong>There were error(s) in your form:</strong><br></p>' . $error . '</div>'; 
} else { 

    $successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>'; 

      // $emailTo = "me@mydomain.com"; 

      //$subject = $_POST['subject']; 

      //$content = $_POST['content']; 

     // $headers = "From: ".$_POST['email']; 

     // if (mail($emailTo, $subject, $content, $headers)) { 

      //  $successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>'; 


     // } else { 

     //  $error = '<div class="alert alert-danger" role="alert"><p><strong>Your message couldn\'t be sent - please try again later</div>'; 

      } 
//} 

} 



function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data; 
} 


?> 

表單代碼：

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
    <div class="cform"> 
    <input type="text" class="contactfield cformbottom" id="name" placeholder="Your full name" name="name" value="<?php echo $fname;?>"> 

    <input type="email" class="contactfield cformbottom" id="email" name="email" placeholder="Your email" value="<?php echo $email;?>"> 


    <textarea class="contactfield" id="message" name="message" rows="3" placeholder="Your Message" value="<?php echo $message;?>"></textarea> 
      </div> 
    <input type="submit" class="newsbut" value="Submit"> 
</form><br> 
     <div id="error"><? echo $error.$successMessage; ?></div> 

jQuery驗證：

<script type="text/javascript"> 

      $("form").submit(function(e) { 

       var error = ""; 

       if ($("#name").val() == "") { 

        error += "Your name is required.<br>" 

       } 

       if ($("#email").val() == "") { 

        error += "Your email is required.<br>" 

       } 

       if ($("#message").val() == "") { 

        error += "Your message is required.<br>" 

       } 

       if (error != "") { 

       $("#error").html('<div class="formerror" role="alert"><p><strong>There were error(s) in your form:</strong></p>' + error + '</div>'); 

        return false; 

       } else { 

        return true; 

       } 
      }) 


    </script> 

Answer 1

你可以使用我已經貼在下面的方法。只需閱讀函數上方的註釋並使用適當的參數調用該函數即可。 在調用remote_call之前，您可以調用另一個方法load_image，並在回調中的響應之後，調用您的deload_image函數。

這是較舊的發送ajax請求的方式。 apis很快就會被移除，只是createbrowser對象函數（下面的最後一個方法需要被修改）。

另外請注意，在下面的方法中調用了一個自定義Alert函數，它將修改警報函數的行爲 // ===================== ================================================== ===================== // // ======================== =================發送AJAX請求============================== == // // =========================================== =================================================// /* 強制性對象。它應該具有如下所述的各種屬性。一些是madatory和其它任選 強制性object.actionScriptURL =相對路徑（相對於服務器的文檔根）頁，這是被稱爲的 它也可以是沿着urlwith可選 = object.sendMethod POST/GET查詢字符串。默認值是post 可選object.callType = ASYNC/SYNC。默認值是ASYNC 可選object.additionalData = ANYDATA像FORMDATA要不然 可選object.callBack發送=任何要調用的函數背面從服務器WID響應。如果傳遞函數作爲一個對象，然後該函數必須有一個參數調配 */

function send_remoteCall(object) 
{ 
    var callType = true, sendMethod = 'POST', additionalData = null, callBack = ''; 
    if(IsValueNull(object.actionScriptURL)) 
     return false; 

    if(IsValueNull(object.sendMethod)) 
     sendMethod = 'POST'; 

    if(!IsValueNull(object.callType) && object.callType == 'SYNC') 
     callType = false; 

    additionalData = object.additionalData; 

    var xmlHttp = createBrowserObject(); 
    if(!IsValueNull(object.callBack)) 
    { 
     callBack = object.callBack; 
     xmlHttp.onreadystatechange = function(){ 
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 
      callBack(xmlHttp.responseText); 
     }; 
    } 
    xmlHttp.open(sendMethod,object.actionScriptURL,callType); 
    if(additionalData != null && additionalData != undefined){ 
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     xmlHttp.setRequestHeader("Content-length", additionalData.length); 
     xmlHttp.setRequestHeader("Connection", "close"); 
    } 
    xmlHttp.send(additionalData); 
} 

function loadImage() 
{ 
    //document.getElementById('LayOutDiv').style.display = "block"; 
    //showCenter('<div id="fade"><img src="../../Common/images/aloader.gif"></div>'); 
    //document.getElementById('LayOutDiv').innerHTML = '<img src="../../Common/images/aloader.gif">'; 
    var LoadingImage = document.getElementById('LoadingImage'); 
    if(!IsValueNull(LoadingImage)){ 
     LoadingImage.style.display = "block"; 
     showCenter('LoadingImage'); 
    } 
    LayOutDiv = document.getElementById('LayOutDiv'); 
    if(!IsValueNull(LayOutDiv)) 
     LayOutDiv.style.display = "block"; 
    setTimeout(deloadImage, 15000); 
} 

/*=======================================================*/ 
//===========FUNCTION TO HIDE THE LOADING EFFECT========== 
/*======================================================*/ 

function deloadImage() 
{ 
    //document.getElementById('LayOutDiv').innerHTML = ''; 
    LoadingImage= document.getElementById('LoadingImage'); 
    if(!IsValueNull(LoadingImage)) 
     LoadingImage.style.display = "none"; 
    LayOutDiv = document.getElementById('LayOutDiv'); 
    if(!IsValueNull(LayOutDiv)) 
     LayOutDiv.style.display = "none"; 
} 


//==============================================================================================// 
//========================= CREATE BROWSE OBJECT FOR AJAX =======================// 
//==============================================================================================// 
function createBrowserObject() 
{ 
    if(xmlHttp) 
     delete xmlHttp; 

    var xmlHttp; 
    try 
    { 
     xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari  
    } 
    catch (e) 
    { 
     try 
     { 
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer     
     } 
     catch (e) 
     { 
      try 
      { 
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (e) 
      { 
       Alert(JavascriptNotWorking); 
      } 
     } 
    } 

    return xmlHttp; 
}