請解決該問題在我的AJAX腳本對於聯繫表

Question

我想實現一些AJAX腳本由我的聯繫表格提交而無需刷新頁面

我有很多的嘗試，因爲我不知道在哪裏的錯誤是在我的AJAX代碼。

這是我的index.php文件

<div id="response_result"> 
</div> 

<form class="contact-form" method="POST" action="" onsubmit="return foo();" name="form" id="form_id"> 
      <input type="text" name="contact_name" id="contact_name_id" /> 
      <input type="text" name="contact_email" id="contact_email_id" /> 
      <input type="text" id="contact_phone_id" name="contact_phone" /> 
      <input type="text" id="contact_company_name_id" name="contact_company_name"/> 
      <input type="text" name="contact_subject" id="contact_subject_id"/> 
      <textarea name="contact_message" id="contact_message_id"></textarea> 
      <input type="submit" name="contact_submit" value="Submit Message" id="contact_submit_id" /> 
</form> 

這是我的PHP代碼該文件

<?php 
if(isset($_POST['contact_submit'])) 
{ 
    $contact_name = $_POST['contact_name']; 
    $contact_email = $_POST['contact_email']; 
    $contact_phone = $_POST['contact_phone']; 

    $contact_company_name = $_POST['contact_company_name']; 

    $contact_subject = $_POST['contact_subject']; 
    $contact_message = $_POST['contact_message']; 

    if ((strlen($contact_message) < 5) OR (strlen($contact_message) > 500)) 
    { 
     ?> 
     <script> 
     alert('Your Message Should contains Characters between 5 to 500 ..... !!'); 
     </script> 
     <?php 
     return false; 
    } 

    else if(($contact_name == "") OR ($contact_email == "") OR ($contact_phone == "") OR ($contact_company_name == "") OR ($contact_subject == "") OR ($contact_message == "")) 
    { 
     ?> 
     <script> 
     alert('Please Supply Each Field .... !!'); 
     </script> 
     <?php 
    } 

    else if($Object->save_contact_us_form_data($contact_name, $contact_email,$contact_phone, $contact_company_name, $contact_subject, $contact_message, $contact_date)) 
    { 
     ?> 
     <script> 
     alert('Data Submitted Successfully .... !!\nWe will get Back You Soon .... !!'); 
     </script> 
     <?php 
     return true; 
    } 

    else 
    { 
     ?> 
     <script> 
     alert('An Error Occured While Submitting Data .... !!'); 
     </script> 
     <?php 
     return false; 
    } 
} 
?> 

我的PHP代碼是完美的工作。

這是我AJAX代碼（不工作）

<script> 
    function foo() 
    { 
     var contact_name1 = document.getElementById("contact_name_id").value; 
     var contact_email1 = document.getElementById("contact_email_id").value; 
     var contact_phone1 = document.getElementById("contact_phone_id").value; 
     var contact_company_name1 = document.getElementById("contact_company_name_id").value; 
     var contact_subject1 = document.getElementById("contact_subject_id").value; 
     var contact_message1 = document.getElementById("contact_message_id").value; 
     $.ajax({ 
     type: 'post', 
     url: 'Contact_Us.php', 
     data: { 
      contact_name:contact_name1, 
      contact_email:contact_email1, 
      contact_phone:contact_phone1, 
      contact_company_name:contact_company_name1, 
      contact_subject:contact_subject1, 
      contact_message:contact_message1 
     }, 
     success: function (response) { 
      document.getElementById("response_result").innerHTML = response; 
     } 
     }); 
    } 
</script> 

Answer 1

當你與AJAX提交表單時，請務必使用抑制了preventDefault默認表單提交邏輯。所以，你的代碼應該更改爲：

<form class="contact-form" method="POST" action="" name="form" id="form_id"> 
      <input type="text" name="contact_name" id="contact_name_id" /> 
      <input type="text" name="contact_email" id="contact_email_id" /> 
      <input type="text" id="contact_phone_id" name="contact_phone" /> 
      <input type="text" id="contact_company_name_id" name="contact_company_name"/> 
      <input type="text" name="contact_subject" id="contact_subject_id"/> 
      <textarea name="contact_message" id="contact_message_id"></textarea> 
      <input type="submit" name="contact_submit" value="Submit Message" id="contact_submit_id" /> 
</form> 

<script> 
    $("#form_id").on("submit", function(e) { 
     e.preventDefault(); 
     var contact_name1 = document.getElementById("contact_name_id").value; 
     var contact_email1 = document.getElementById("contact_email_id").value; 
     var contact_phone1 = document.getElementById("contact_phone_id").value; 
     var contact_company_name1 = document.getElementById("contact_company_name_id").value; 
     var contact_subject1 = document.getElementById("contact_subject_id").value; 
     var contact_message1 = document.getElementById("contact_message_id").value; 
     $.ajax({ 
     type: 'post', 
     url: 'Contact_Us.php', 
     dataType: 'json', 
     data: { 
      contact_name:contact_name1, 
      contact_email:contact_email1, 
      contact_phone:contact_phone1, 
      contact_company_name:contact_company_name1, 
      contact_subject:contact_subject1, 
      contact_message:contact_message1, 
      contact_submit:"Submitted" 
     }, 
     success: function (response) { 
      document.getElementById("response_result").innerHTML = response; 
     } 
     }); 
    }); 
</script> 

我已經加入dataType得到JSON作爲結果。所以讓PHP發送JSON。 （注意： JavaScript警告不適用於AJAX）。因此你的PHP代碼是：

<?php 

$err = []; 

if(isset($_POST['contact_submit'])) 
{ 
    $contact_name = $_POST['contact_name']; 
    $contact_email = $_POST['contact_email']; 
    $contact_phone = $_POST['contact_phone']; 

    $contact_company_name = $_POST['contact_company_name']; 

    $contact_subject = $_POST['contact_subject']; 
    $contact_message = $_POST['contact_message']; 

    if ((strlen($contact_message) < 5) OR (strlen($contact_message) > 500)) 
    { 
     $err[] = 'Your Message Should contains Characters between 5 to 500 ..... !!'; 
    } 

    else if(($contact_name == "") OR ($contact_email == "") OR ($contact_phone == "") OR ($contact_company_name == "") OR ($contact_subject == "") OR ($contact_message == "")) 
    { 
     $err[] = "Please Supply Each Field .... !!"; 
    } 

    else if($Object->save_contact_us_form_data($contact_name, $contact_email,$contact_phone, $contact_company_name, $contact_subject, $contact_message, $contact_date)) 
    { 
     $err[] = 'Data Submitted Successfully .... !!\nWe will get Back You Soon .... !!'; 
    } 

    else 
    { 
     $err[] = 'An Error Occured While Submitting Data .... !!'; 
    } 

    echo json_encode($err); 
}