重放确认表单Ajax phpmailer的重新提交和折衷

我有一个ajax代码,它在不重新加载页面的情况下发送带有phpmailer的电子邮件。我不希望它在jquery中,但在香草js。代码正常工作,但在发送和刷新页面后,它将“确认表单重新提交”。如何防止这一点?而且,这个代码是否正确?这是我第一次创造像Ajax的东西,我几乎不了解任何事情。

<?php
   require('mail.php'); //All PHPMailer lines here...
   $error = [];
   $msg = '';
   if(array_key_exists('email', $_POST )){
      $email = $_POST['email'];
      $name = $_POST['name'];
      $subject = $_POST['subject'];
      $message = $_POST['message'];
      $mail->Username = 'email';
      $mail->Password = 'pass';
      $mail->setFrom('email');
      $mail->addAddress('email');
      if($mail->addReplyTo($email, $name)){
         $mail->Subject = $subject;
         $mail->isHTML(false);
         $mail->Body = <<<EOT
            Email: {$email}
            Name: {$name}
            Message: {$message}
         EOT;
      }
      // Check inputs
      if ($name=="") {
          $error[] = "A name is required.";
      }
      if ($subject=="") {
          $error[] = "A subject is required.";
      }
      if ($message=="") {
          $error[] = "A message is required.";
      }
      if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
          $error[] = "A valid email is required.";
      }
      if(empty($error)){
          if(!$mail->send()){
              $error[] = 'There was an error sending the mail. Please try again!';
          }
      }
  }
?>
<script>
    function doRegister(){
        let checks = {
            name : document.getElementById("mail-name"),
            email : document.getElementById("mail-email"),
            subject : document.getElementById("mail-subject"),
            message : document.getElementById("mail-message")
        },
        error = "";
        if(checks.name.value==""){
            error += document.getElementById("name-alert").innerHTML+='<p>A name is required!</p>';
        }
        if(checks.subject.value==""){
            error += document.getElementById("subject-alert").innerHTML+='<p>A subject is required!</p>';
        }
        if(checks.message.value==""){
            error += document.getElementById("message-alert").innerHTML+='<p>A message is required!</p>';
        }
        let pattern = /^(([^<>()\[\]\\.,;:\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(!pattern.test(checks.email.value.toLowerCase())){
            error += document.getElementById("email-alert").innerHTML+='<p>A valid email is required!</p>';
        }
        // Ajax
        if(error!=""){
            error="";
        } else {
            let data = new FormData();
            for(let k in checks){
                data.append(k, checks[k].value);
            }
            let xhr = new XMLHttpRequest();
            xhr.open('POST', "", true);
            xhr.onload = function(){
                let res = <?php echo json_encode(['status' => count($error) == 0 ? 1 : 0, 'error' => $error]);?>;
                // SUCCESS!
                if (res.status) {
                    document.getElementById("success-alert").innerHTML+='<p>Success!</p>';
                } else {
                    // ERROR!
                    error = "";
                    for (let e of res['error']) {
                    error += e + "\n";
                    }
                    alert(error);
                }
            };
        // SEND
        xhr.send(data);
        }
        return false;
    }
</script>
<form method="POST" onsubmit="return doRegister()">
   <input id="mail-name" type="text" name="name" placeholder="Your Name">
   <span id="name-alert"></span>
   <input id="mail-email" type="text" name="email" placeholder="Your Email">
   <span id="email-alert"></span>
   <input id="mail-subject" type="text" name="subject" placeholder="Your Subject">
   <span id="subject-alert"></span>
   <textarea id="mail-message" name="message" placeholder="Your Message"></textarea>
   <span id="message-alert"></span>
   <button type="submit">Submit</button>
   <span class="contact__form--alert-success" id="success-alert"></span>
</form>
对于浏览器要求您确认一个提交,你必须做一个normal.首先掌握。如果您的Ajax部分实际上是预期的,那么不应该发生。CBROE
“代码正常工作,但在发送和刷新页面后”-谁在这种情况下刷新页面,为什么 - 当您说您使用Ajax来明确阻止需要重新加载页面的需要?CBROE
@ cbroe也许我写错了。我的意思是,当按下按钮时,电子邮件会在不刷新的情况下发送。但如果有人在那一刻刷新页面,我就会收到此警报“确认表单重新提交”。最终
Matter,如果您导航到页面Via.一个表格在不同的页面上,这就是为什么我要澄清。但如果那不是这样的话,那么你所说的是目前迄今为止实际上可以解释的。你是Absolutely.健康,Ajax部分工作?如果有任何JS错误会使JS突破,那么您的表格将提交夜空.发送邮件可能仍然发生,因为参数名称是相同的,就像您通过AJAX发送此时一样。CBROE
this exampleHelp?Synchro

回答 0