我已经搜索了很多解决此问题的方法,但没有找到解决方法。我试图在我的网站上包含一个用于发送电子邮件的表单(与我们联系的表单)(使用Bootstrap)。 PHP已用于邮件程序模型。

问题在于该消息在发送消息时应该显示给用户,该消息没有出现在分配给它的位置(#status),而是将我定向到具有数组数据的新页面。https://drive.google.com/file/d/1tH8cVCWpx7pDe2OyxkGSKY6rnqV9KxlL/view?usp=sharing

请注意,该消息在所有验证情况下都会出现(当名称或电子邮件或主题或消息字段为空时),仅在发送电子邮件时,它会将我定向到另一个页面!https://drive.google.com/file/d/1lK11R2a18S2arExDegcZyOnITwRlIOYh/view?usp=sharing

这是我的代码:



< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < /script> <
  script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script> <
  script >
  function validateForm() {
    document.getElementById('status').innerHTML = "Sending...";
    formData = {
      'name': $('input[name=name]').val(),
      'email': $('input[name=email]').val(),
      'subject': $('input[name=subject]').val(),
      'message': $('textarea[name=message]').val()
    };

    $.ajax({
      url: "mail.php",
      type: "POST",
      data: formData,
      dataType: "json",

      success: function(data, textStatus, jqXHR) {

        $('#status').text(data.message1);
        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);
      }
    });

  } <
  /script>

<div class="col-lg-8">
  <form id="contact-form" name="contact-form" action="mail.php" method="POST">
    <div class="row ">
      <div class="form-group col-md-6">
        <input class="form-control" placeholder="Name" id="name" name="name" required="required">
      </div>
      <div class="form-group col-md-6">
        <input type="email" class="form-control" placeholder="Email" id="email" name="email" required="required">
      </div>
      <div class="form-group col-md-12">
        <input type="text" class="form-control" placeholder="Subject" id="subject" name="subject" required="required">
      </div>
      <div class="form-group col-md-12">
        <textarea type="text" class="form-control" rows="6" placeholder="Message" id="message" name="message" required="required"></textarea>
      </div>
    </div>
    <div class="d-flex justify-content-end">
      <button type="submit" class="btn btn-lg btn-primary ml-auto" onclick="validateForm();">Send Message</button>
    </div>
    <div class="status" id="status"></div>
  </form>
</div>







<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
 $data = array();
if ($name === ''){
    $data['message1'] = 'Name cannot be empty.';
    $data['code'] = 0;
print json_encode($data);
exit();
}
if ($email === ''){
    $data['message1'] = 'Email cannot be empty.';
    $data['code'] = 0;
print json_encode($data);
exit();
} else {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
    $data['message1'] = 'Email format invalid.';
    $data['code'] = 0;
print json_encode($data);
exit();
}
}
if ($subject === ''){
    $data['message1'] = 'Subject cannot be empty.';
    $data['code'] = 0;
print json_encode($data);
exit();
}
if ($message === ''){
    $data['message1'] = 'Message cannot be empty.';
    $data['code'] = 0;
print json_encode($data);
exit();
}
$content="From: $name \nEmail: $email \nMessage: $message";
$recipient = "******@gmail.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
$data['message1'] = 'Email successfully sent!';
    $data['code'] = 1;
print json_encode($data);
exit();
?>

最佳答案

您遇到的问题是,在form提交的默认行为是浏览器与HTTP协议进行交互时通常会看到的行为。您的buttontype submit,它会提交form

假设您处理了validateForm中想要的所有逻辑,则代码缺失的原因是您打算防止submit上的默认行为:

$("#contact-form").submit(function(e) {
    e.preventDefault();
});

10-07 20:00
查看更多