如果成功将数据推入数据库，则ajax显示消息

Question

我有一个允许用户进行约会的表单，该表单现在由ajax处理。以前，该表单只是使用post的普通表单，而PHP则获取数据并将其推送到数据库中。

添加ajax之后，数据确实被推送到数据库，但是我必须显示的消息是成功还是失败，但没有显示。有谁知道如何做到这一点？

用于推送到数据库的php代码

if (isset($_POST['requestAppt'])) {

    $date = $_POST['date'];

    $dateFormatted = date('Y-m-d', strtotime($date));
    $sanitisedDate = $conn->real_escape_string($dateFormatted);
    $time = $_POST['time'];
    $sanitisedTime = $conn->real_escape_string($time);
    $length = $_POST['lengthOfSession'];
    $sanitisedLength = $conn->real_escape_string($length);
    $details = $_POST['sessionDetails'];
    $sanitisedDetails = $conn->real_escape_string($details);

    if (($dateFormatted != "") && ($time != "") && ($details != "") && $coachID != "") {
        $pendingAppointment = "INSERT INTO ... (coach_id, user_id, date, time, duration, details, confirmed)
        VALUES ('$coachID', '$userid', '$sanitisedDate', '$sanitisedTime', '$sanitisedLength', '$sanitisedDetails', 0);";

        $executePendingAppointment = $conn->query($pendingAppointment);
        if (!$executePendingAppointment) {
            echo $conn->error;
            $requestError = "Sorry, your request has not been sent. Please check your input and try again.";
        } else {
            $requestSuccess = "Your request has been sent.";
        }

    } 
}

表格

<div class='message-body'>
       <form action='appointments.php' method='POST' id='makeAppts'>
      <p> Date: <input class='input' type='text' id='datepicker' name='date' readonly></p>
       <p>Time: <input class='input' type='text' id='timepicker' name='time' readonly></p>
    <p> Duration: <div class='select'>
    <select  name='lengthOfSession'>
      <option>30 Minutes</option>
      <option>1 Hour</option>
      <option>90 Minutes</option>
      <option>2 hours</option>
    </select>
  </div>
       <p>Your Coach:<input class='input' type='text' id='coach'  value='$coachName' name='coachName' readonly></p>
       <p>Session details: : <input class='input' type='text' id='timeSelect' placeholder='I want to work on my glutes' name='sessionDetails'></p>
       ";

    echo "<div id='ajaxResult'> </div>";
    if (isset($requestError)) {
        echo "<p class='buttonError'>$requestError</p>";
    } else if (isset($requestSuccess)) {
        echo "<p class='buttonSucc' >$requestSuccess</p>";
    }
    echo "<p class='apptButton'><input type='submit' class='button is-primary appointmentSubmit' value='Request Appointment' name='requestAppt'> </p>
    </form>

       </div> <!-- end of message body-->

ajax

$('#makeAppts').on('submit', function() {
  var that = $(this),
  url = that.attr('action'),
  type = that.attr('method'),
  data = {};

  that.find('[name]').each(function(index, value) {
    var that = $(this),
    name = that.attr('name'),
    value = that.val();
data[name] = value;


}); 


$.ajax ({
  url: url,
  type: type,
  data: data,
  success: function(data){
    $('#makeAppts').trigger('reset');
    $('#success').fadeIn().html(data);



  }

});



return false

});

我试图做这样的事情，但是它总是发生并且替换了提交按钮

Doing something like this will put success no matter if the query doesn't get sent, and replaces the button

$.ajax ({
  url: url,
  type: type,
  data: data,
  success: function(data){
    $('#makeAppt').trigger('reset');
    $('#success').fadeIn().html(data);
    $('#ajaxResult').html('Success');
  }

});

每次加载页面时都会显示错误

if(isset($_POST['date'],$_POST['time'],$_POST['coachName'],$_POST['lengthOfSession'],$_POST['sessionDetails'],)) {
    $requestSuccess = "Your request has been sent.";
} else {
    $requestError = "Sorry, your request has not been sent. Please check your input and try again.";

}