使用Ajax提交不帶重新加載頁面的聯系表

Question

我正在遵循構建引導聯系表單並通過mail.php提交它的指南，而不必使用Ajax重新加載頁面。 在嘗試實現Ajax之前，我可以使表格工作。 我之所以陷入困境，是因為這些說明無法明確確定到底需要替換哪些代碼以及新代碼應該去哪里。 這是我要遵循的指南和我所停留的部分的鏈接：

使用AJAX發送電子郵件而無需重新加載頁面

這是我正在嘗試使其工作的網站： CRANE TECH。 凈

我對php不太熟悉，所以我認為這是我搞砸的地方。

這是我正在使用的確切代碼：

HTML

<section class="section">
                        <h2 class="section-heading  text-muted h4 pt-4">Free Consultation</h2>
                        <!--CONTACT DESCRIPTION-->
                        <p class="section-description">Are you ready to turn your vision into a reality? Fill out the contact form below and a member of our team will get back to you as soon as possible. Let's bring your idea to life!</p>
                        <div class="row">
                            <div class="col-12">
                                <form id="contact-form" name="contact-form" action="mail.php" method="POST">
                                    <div class="row">
                                        <!--NAME INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="name" name="name" class="form-control" placeholder="* NAME" required>
                                                <label for="name" class=""></label>
                                            </div>
                                        </div>

                                        <!--EMAIL INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="email" name="email" class="form-control" placeholder="* EMAIL" required>
                                                <label for="email" class=""></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <!-- PHONE NUMBER INPUT -->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="clientPhone" name="clientPhone" class="form-control" placeholder="PHONE" required>
                                                <label for="phone number" class=""></label>
                                            </div>
                                        </div>

                                        <!--SUBJECT INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <input type="text" id="subject" name="subject" class="form-control" placeholder="* SUBJECT" required>
                                                <label for="subject" class=""></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <!--MESSAGE INPUT-->
                                        <div class="col-12">
                                            <div class="md-form">
                                                <textarea type="text" id="message" name="message" rows="3" class="form-control md-textarea" placeholder="* MESSAGE" required></textarea>
                                                <label for="message"></label>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                                <!-- SUBMIT BUTTON -->
                                <div class=" col-3 offset-3 offset-md-4 mb-4">
                                    <button class="btn btn-warning" onclick="validateForm()">Send <i class="fa fa-paper-plane ml-1"></i></button>
                                </div>
                                <div id="status" class="text-muted col-12 col-md-8 offset-md-2 my-1"></div>
                            </div>

JS

function validateForm() {
var name = document.getElementById('name').value;
if (name == "") {
    document.getElementById('status').innerHTML = "Name cannot be empty";
    return false;
}
var email = document.getElementById('email').value;
if (email == "") {
    document.getElementById('status').innerHTML = "Email cannot be empty";
    return false;
} else {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!re.test(email)) {
        document.getElementById('status').innerHTML = "Email format invalid";
        return false;
    }
}

var subject = document.getElementById('subject').value;
if (subject == "") {
    document.getElementById('status').innerHTML = "Subject cannot be empty";
    return false;
}
var message = document.getElementById('message').value;
if (message == "") {
    document.getElementById('status').innerHTML = "Message cannot be empty";
    return false;
}
document.getElementById('status').innerHTML = "Sending...";
formData = {
    'name': $('input[name=name]').val(),
    'email': $('input[name=email]').val(),
    'clientPhone': $('input[name=clientPhone]').val(),
    'subject': $('input[name=subject]').val(),
    'message': $('textarea[name=message]').val()

};
document.getElementById('contact-form').submit();

$.ajax({
    url: "mail.php",
    type: "POST",
    data: formData,
    success: function(data, textStatus, jqXHR) {

        $('#status').text(data.message);
        if (data.code) //If mail was sent successfully, reset the form.
            $('#contact-form').closest('form').find("input[type=text], textarea").val("");
    },
    error: function(jqXHR, textStatus, errorThrown) {
        $('#status').text(jqXHR);
    }
});
}

MAIL.PHP

<?php
if(isset( $_POST['name']))
  $name = $_POST['name'];
if(isset( $_POST['email']))
  $email = $_POST['email'];
if(isset( $_POST['clientPhone']))
  $clientPhone = $_POST['clientPhone'];
if(isset( $_POST['subject']))
  $subject = $_POST['subject'];
if(isset( $_POST['message']))
  $message = $_POST['message'];

$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
if ($name === ''){
  print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
  exit();
}
if ($email === ''){
  print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
  exit();
} else {
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
  print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
  exit();
  }
}
if ($subject === ''){
  print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
  exit();
}
if ($message === ''){
  print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
  exit();
}

//   if ($name === ''){
//     echo "Name cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }
//   if ($email === ''){
//     echo "Email cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   } else {
//     if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
//       echo "Email format invalid.";
//       echo "<br>";
//       echo "<br>";
//       echo "<a href='index.html'>GO BACK</a>";
//       die();
//     }
//   }
//   if ($subject === ''){
//     echo "Subject cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }
//   if ($message === ''){
//     echo "Message cannot be empty.";
//     echo "<br>";
//     echo "<br>";
//     echo "<a href='index.html'>GO BACK</a>";
//     die();
//   }

$content="From: $name \n Email: $email \n Phone #: $clientPhone \n Subject: $subject \n Message: $message";
$recipient = "support@crane-tech.net";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email successfully sent!', 'code' => 1));
exit();
?>

Answer 1

主要問題

您的主要問題是php代碼中缺少semcolon（;）和第15行的結尾。

其他事宜

您的網站使用的是JQuery Slim，Slim版本不包含$.ajax ，因此您將收到錯誤消息。 要解決此問題，只需包含完整的JQuery或不使用JQuery即可執行ajax。

您可能還希望擺脫這一行：
document.getElementById('contact-form').submit();
因為當您已經手動提交數據時，它會導致重定向。

您應該刪除這些行，因為已經設置了它們：

$name = $_POST['name'];
$email = $_POST['email'];
$clientPhone = $_POST['clientPhone']
$message = $_POST['message'];
$subject = $_POST['subject'];

---

不相關的注釋：

如果您已經在使用JQuery，則應該使用它-而不是這樣做：
document.getElementById('status')
您應該使用：
$('#status')