Javascript 请在我的联系人表单AJAX脚本中解决此问题

我正在尝试实现一些AJAX脚本，通过它，我的Contact US表单可以在不刷新页面的情况下提交

我尝试了很多，因为我不知道我的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;
    }
}
?>

警报（“您的邮件应包含5到500之间的字符…”）；
警报（'请提供每个字段…！！'）；
警报（'数据已成功提交…！！\n我们将很快回复您…！！'）；
警报（'提交数据时发生错误…！！'）；

我的PHP代码工作正常。

这是我的AJAX代码（不工作）

函数foo（）
{
var contact_name 1=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({
键入：“post”，
url:“Contact_Us.php”，
数据：{
联系人姓名：联系人姓名1，
联系电子邮件：联系电子邮件1，
联系电话：联系电话1，
联系人公司名称：联系人公司名称1，
联系主题：联系主题1，
联系信息：联系信息1
},
成功：功能（响应）{
document.getElementById（“response_result”）.innerHTML=response；
}
});
}

使用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>

---

到底是什么问题？在我的AJAX代码中。我不知道是什么。非常感谢你，兄弟。我感谢你的帮助。因此，在不进行测试/检查的情况下，将您的答案标记为已接受答案。

<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>

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