Question

我需要帮助才能找到我正在做的错误，因为我正在尝试开发一个使用php和ajax从HTML表单发送电子邮件的功能，我遇到的问题是每当我点击时提交bouton页面很新鲜，通常我们可以在javascript脚本中看到，我应该收到一条消息，表明它已成功发送

致以最诚挚的问候，

PHP文件：

<?php
if (isset($_REQUEST['email']))  {
    //Email information
    $admin_email = "basselbizri@gmail.com";
    $name = $_REQUEST['first_name'];
    $email = $_REQUEST['email'];
    $message = $_REQUEST['message'];

    //send email
    if (mail($admin_email, $name, $message, "From:" . $email)) {
        echo 1;
    }
    else {
        echo 0;
    }
}
?>

HTML表单：

<form class="inline" id="contactForm" method="post" >
   <div class="row">
       <div class="col-sm-6 height-contact-element">
           <div class="form-group">
               <input type="text" name="first_name" class="form-control custom-labels" id="name" placeholder="FULL NAME" required data-validation-required-message="Please write your name!"/>
               <p class="help-block text-danger"></p>
           </div>
       </div>
       <div class="col-sm-6 height-contact-element">
           <div class="form-group">
               <input type="email" name="email" class="form-control custom-labels" id="email" placeholder="EMAIL" required data-validation-required-message="Please write your email!"/>
               <p class="help-block text-danger"></p>
           </div>
       </div>
       <div class="col-sm-12 height-contact-element">
           <div class="form-group">
               <input type="text" name="message" class="form-control custom-labels" id="message" placeholder="WHAT'S ON YOUR MIND" required data-validation-required-message="Please write a message!"/>
           </div>
       </div>
       <div class="col-sm-3 col-xs-6 height-contact-element">
           <div class="form-group">
               <input type="submit" class="btn btn-md btn-custom btn-noborder-radius" value="Send It"/>
           </div>
       </div>
       <div class="col-sm-3 col-xs-6 height-contact-element">
           <div class="form-group">
               <button type="button" class="btn btn-md btn-noborder-radius btn-custom" name="reset">RESET
               </button>
           </div>
       </div>
       <div class="col-sm-3 col-xs-6 height-contact-element">
           <div class="form-group">
               <div id="response_holder"></div>
           </div>
       </div>
       <div class="col-sm-12 contact-msg">
       <div id="success"></div>
       </div>
   </div>
</form>

JS脚本：

$('#contactForm').on('submit', function(e){
            e.preventDefault();
            e.stopPropagation();

            // get values from FORM
            var name = $("#name").val();
            var email = $("#email").val();
            var message = $("#message").val();
            var goodToGo = false;
            var messgaeError = 'Request can not be send';
            var pattern = new RegExp(/^(('[\w-\s]+')|([\w-]+(?:\.[\w-]+)*)|('[\w-\s]+')([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);


             if (name && name.length > 0 && $.trim(name) !='' && message && message.length > 0 && $.trim(message) !='' && email && email.length > 0 && $.trim(email) !='') {
                  if (pattern.test(email)) {
                     goodToGo = true;
                  } else {
                     messgaeError = 'Please check your email address';
                     goodToGo = false; 
                  }
             } else {
               messgaeError = 'You must fill all the form fields to proceed!';
               goodToGo = false;
             }


            if (goodToGo) {
               $.ajax({
                 data: $('#contactForm').serialize(),
                 beforeSend: function() {
                   $('#success').html('<div class="col-md-12 text-center"><img src="images/spinner1.gif" alt="spinner" /></div>');
                 },
                 success:function(response){
                   if (response==1) {
                     $('#success').html('<div class="col-md-12 text-center">Your email was sent successfully</div>');
                     window.location.reload();
                   } else {
                     $('#success').html('<div class="col-md-12 text-center">E-mail was not sent. Please try again!</div>');
                   }
                 },
                 error:function(e){
                   $('#success').html('<div class="col-md-12 text-center">We could not fetch the data from the server. Please try again!</div>');
                 },
                 complete: function(done){
                   console.log('Finished');
                 },
                 type: 'POST',
                 url: 'js/send_email.php', 
               });
               return true;
            } else {
               $('#success').html('<div class="col-md-12 text-center">'+messgaeError+'</div>');
               return false;
            }
            return false;
        });
    });

Answer 1

在您的success()方法中，您reload()了该页面。

if (response==1) {
    $('#success').html('<div class="col-md-12 text-center">Your email was sent successfully</div>');
    window.location.reload(); // <----- remove this; it's causing the page to reload
}

因此，当您的mail()函数解析true时，在您的PHP文件（send_email.php）中，您将1返回到AJAX响应，即允许if (response == 1)满足，然后您使用window.location.reload()重新加载页面。删除window.location.reload();会阻止页面重新加载。

无法通过ajax发送电子邮件

1 个答案: