javascript - 使用 Ajax 提交联系表单而无需重新加载页面

Question

我正在按照指南构建引导联系表单并通过 mail.php 提交它，而无需使用 ajax 重新加载页面。在我尝试实现 ajax 之前，我能够让表单正常工作。我陷入困境，因为说明不清楚具体需要替换哪些代码以及新代码应该放在哪里。这是我正在关注的指南和我所停留的部分的链接:

Sending email without reloading page using AJAX

这是我试图让它工作的网站:CRANE TECH. NET

我对 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 代码中缺少分号 (;) 和第 15 行末尾。

其他问题

您的网站正在使用 JQuery Slim，$.ajax 未包含在 slim 版本中，因此您会收到错误消息。要解决此问题，只需包含完整的 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')