Ajax 在提交表单后两次向 Mysql 调用插入

Question

我在由 AJAX 调用处理的表单上插入和更新时遇到问题。如果填写了必填字段（HTML、Ajax 和 PHP），一切正常。

如果我尝试在不填写必填字段的情况下提交，错误消息会按预期设置，但当我调整它、填写并提交时，插入会被触发两次。

我是新手，所以有可能我在某个地方犯了一个愚蠢的错误，但我真的没有看到。在此先感谢您的帮助。

这是我使用的代码：

HTML:

<form method="post" id="formStepVisit">
  <div class="form-group updt-form col-md-4">
    <label for="firstVisitDate">Datum eerste bezoek*</label> 
    <input id="firstVisitDate" name="firstVisitDate" type="date" value="" class="form-control">
    <small id="dateHelp" class="form-text text-muted">*Datum eerste bezoek bij klant: <?php echo $Voornaam.' '.$Achternaam;?> is verplicht.</small>
  </div>
  <div class="form-group updt-form">
    <label for="firstVisitfb">Feedback eerste bezoek*</label>
    <textarea class="form-control" id="firstVisitfb" name="firstVisitfb" rows="4"></textarea>
    <small id="fbHelp" class="form-text text-muted">*Feedback eerste bezoek bij klant: <?php echo $Voornaam.' '.$Achternaam;?> is verplicht.</small>
  </div>
  <input type="hidden" id="sid" name="sid" value="<?php echo $sid?>">
  <button type="submit" id="btnFaseVisit" class="btn btn-primary">Voltooid</button>
</form>

JQuery / AJAX:

$(document).on('click', '#btnFaseVisit', function(){
  if( buttonclicked = true ){
    $('#formStepVisit').on('submit', function (e) { 
      var formData = {
        visitDate: $("#firstVisitDate").val(), 
        fb: $("#firstVisitfb").val(),
        sid: $("#sid").val()
      };
        $.ajax({
        type: "POST",
        url: "actions/processVisit.php",
        data: formData,
        dataType: "json",
        encode: true,
        }).done(function (data) {
          console.log(data);
          if (!data.success) {
            if (data.errors.fb) {
              $("#firstVisitfb").addClass("has-error");
              $("#fbHelp").prepend('<div class="help-block">' + data.errors.fb + "</div>");
            }
            if (data.errors.visitDate) {
              $("#firstVisitDate").addClass("has-error");
              $("#dateHelp").prepend('<div class="help-block">' + data.errors.visitDate + "</div>");
            }
          } else {  
              $("#formStepVisit").html('<div class="alert alert-success">' + data.message + "</div>");
              setTimeout(window.location.reload(true),3000);
          }
        });
      e.preventDefault();
    });
  }
});

PHP:

//Set empty errors and response
$errors = [];
$data = [];

if (empty($_POST['visitDate'])) {
    $errors['visitDate'] = 'Datum is verplicht';
}

if (empty($_POST['fb'])) {
    $errors['fb'] = 'Feedback is required';
}

if (empty($_POST['sid'])) {
    $errors['sid'] = 'Sid is required.';
}

//Sanitation
$visitDate = preg_replace("([^0-9/])", "", $_POST['visitdate']);
$visitDate = date("Y-m-d");
$fb = cleanData ( $_POST['fb'] );
$sid = cleanData ( $_POST['sid'] );
$stepComplete = true;


if (!empty($errors)) {
    $data['success'] = false;
    $data['errors'] = $errors;
} else {
    $sql = "UPDATE laadpalen SET visitDate = ?, visitFB = ?, faseVisitComp =?, fase='offerte' WHERE sid=?";
    if($stmt = mysqli_prepare($con, $sql)){
        // Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($stmt, "ssis", $visitDate, $fb, $stepComplete, $sid);

        if(mysqli_stmt_execute($stmt)){
            $data['success'] = true;
            $data['message'] = 'Update Succesvol! U wordt omgeleid in <span id="seconden">3</span> ';
        }
    } 
    $sql2 = "INSERT INTO laadpalenSteps (sid, datum, fase, feedback) VALUES (?, NOW(),? , ?)";
    $fase = "bezoek";
    if($stmt = mysqli_prepare($con, $sql2)){
        mysqli_stmt_bind_param($stmt, "sss", $sid, $fase, $fb);
        mysqli_stmt_execute($stmt);
    }
  
}

echo json_encode($data);
?>

Answer 1

你为什么要使用 $(document).on ???

确实提交了两次，因为您调用了两次 ajax 方法!!!!!

您确实需要重构您的代码！！

首先，您的 html 应该是这样的：在这种情况下您不需要使用表单。

<div>
  <div class="form-group updt-form col-md-4">
    <label for="firstVisitDate">Datum eerste bezoek*</label> 
    <input id="firstVisitDate" name="firstVisitDate" type="date" value="" class="form-control">
    <small id="dateHelp" class="form-text text-muted">*Datum eerste bezoek bij klant: <?php echo $Voornaam.' '.$Achternaam;?> is verplicht.</small>
  </div>
  <div class="form-group updt-form">
    <label for="firstVisitfb">Feedback eerste bezoek*</label>
    <textarea class="form-control" id="firstVisitfb" name="firstVisitfb" rows="4"></textarea>
    <small id="fbHelp" class="form-text text-muted">*Feedback eerste bezoek bij klant: <?php echo $Voornaam.' '.$Achternaam;?> is verplicht.</small>
  </div>
  <input type="hidden" id="sid" name="sid" value="<?php echo $sid?>">
  <button type="submit" id="btnFaseVisit" class="btn btn-primary">Voltooid</button>
</div>

并且在你的 JS 代码中，当你不使用它时，你应该验证你的空输入不在表单中！

$(function() {
    $('#btnFaseVisit').on('click', function (e) {   
        
        var formData = {
          visitDate: $("#firstVisitDate").val(), 
          fb: $("#firstVisitfb").val(),
          sid: $("#sid").val()
        };
          $.ajax({
          type: "POST",
          url: "actions/processVisit.php",
          data: formData,
          dataType: "json",
          encode: true,
          }).done(function (data) {
            console.log(data);
            if (!data.success) {
              if (data.errors.fb) {
                $("#firstVisitfb").addClass("has-error");
                $("#fbHelp").prepend('<div class="help-block">' + data.errors.fb + "</div>");
              }
              if (data.errors.visitDate) {
                $("#firstVisitDate").addClass("has-error");
                $("#dateHelp").prepend('<div class="help-block">' + data.errors.visitDate + "</div>");
              }
            } else {  
                $("#formStepVisit").html('<div class="alert alert-success">' + data.message + "</div>");
                setTimeout(window.location.reload(true),3000);
            }
          });
        e.preventDefault();
      });
});

Ajax 在提交表单后两次向 Mysql 调用插入

Ajax call inserts to Mysql twice after submitting form

html

php

ajax

jquery