防止頁面在ajax調用后刷新

Question

我有一個引導程序表單，我使用 ajax 調用將其保存到 json 文件中。

我的問題是，當我按下提交按鈕時，頁面似乎在調用后刷新（在單擊提交按鈕后執行），這是我絕對想避免的。

我試圖調查這個問題，但我的知識不足以解決這個問題，因為我對這些概念中的任何一個都沒有深入的理解。

這是我的 BS 表格：

<form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="name">Full Name:</label>
        <div class="col-sm-2">
          <input type="name" class="form-control" id="nameFull">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="phone">Phone:</label>
        <div class="col-sm-2">
          <input type="phone" class="form-control" id="phoneApp">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-2">
          <input type="email" class="form-control" id="emailApp">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="date">Date:</label>
        <div class="col-sm-2">
          <input type="date" class="form-control" id="date">

        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="text">Hour:</label>
        <div class="col-sm-2">
          <select class="form-control" id="time">
            <option value="Time" class="">Time</option>
                        <option value="10am" class="">10:00-10:30</option>
                        <option value="1030am" class="">10:30-11:00</option>
                        </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-lg-2" for="reason">Reason:</label>
        <div class="col-lg-3">
          <textarea class="form-control" id="reason" name="comments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button id="saveAppt" class="btn btn-default">Submit</button>
        </div>
      </div>
    </form>

這是 ajax 調用：

$(document).ready(function() {
    $("#saveAppt").click(function(){
         var fullName = $("#nameFull").val();
         var userName = $("#cpr").val();
         var phone = $("#phoneApp").val();
         var email = $("#emailApp").val();
         var date = $("#date").val();
         var time = $("#time").val();
         var reason = $("#reason").val();
         console.log(time);
         console.log(date);
         console.log(reason);

         var jAppointment= {};
        jAppointment.fullName = fullName;
        jAppointment.userName = userName;
        jAppointment.phone = phone;
        jAppointment.email = email;
        jAppointment.date = date;
        jAppointment.time = time;
        jAppointment.reason = reason;

        console.log(JSON.stringify(jAppointment));

      $.ajax
      ({
        type: "GET",
        dataType : 'json',
        async: false,
        url: 'save-appointments.php',
        data: { data: JSON.stringify(jAppointment) },
        success: function () {console.log("Thanks!"); },
        failure: function() {console.log("Error!");}
      });
    });
});

Answer 1

現在提交操作刷新您的頁面時，單擊事件將永遠不會引發，因為<button>標簽默認具有type='submit'只需添加type='button'類型以避免提交/刷新：

<button type="button" id="saveAppt" class="btn btn-default">Submit</button>

希望這會有所幫助。

 $(document).ready(function() { $("#saveAppt").click(function(){ var fullName = $("#nameFull").val(); var userName = $("#cpr").val(); var phone = $("#phoneApp").val(); var email = $("#emailApp").val(); var date = $("#date").val(); var time = $("#time").val(); var reason = $("#reason").val(); console.log(time); console.log(date); console.log(reason); var jAppointment= {}; jAppointment.fullName = fullName; jAppointment.userName = userName; jAppointment.phone = phone; jAppointment.email = email; jAppointment.date = date; jAppointment.time = time; jAppointment.reason = reason; console.log(JSON.stringify(jAppointment)); $.ajax ({ type: "GET", dataType : 'json', async: false, url: 'save-appointments.php', data: { data: JSON.stringify(jAppointment) }, success: function () {console.log("Thanks!"); }, failure: function() {console.log("Error!");} }); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="name">Full Name:</label> <div class="col-sm-2"> <input type="name" class="form-control" id="nameFull"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="phone">Phone:</label> <div class="col-sm-2"> <input type="phone" class="form-control" id="phoneApp"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-2"> <input type="email" class="form-control" id="emailApp"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="date">Date:</label> <div class="col-sm-2"> <input type="date" class="form-control" id="date"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="text">Hour:</label> <div class="col-sm-2"> <select class="form-control" id="time"> <option value="Time" class="">Time</option> <option value="10am" class="">10:00-10:30</option> <option value="1030am" class="">10:30-11:00</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-lg-2" for="reason">Reason:</label> <div class="col-lg-3"> <textarea class="form-control" id="reason" name="comments" placeholder="Describe the reason to make an appointment here. Please, include symptoms and any historical data that may help us determine your case." rows="5"></textarea><br> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type='button' id="saveAppt" class="btn btn-default">Submit</button> </div> </div> </form> <br><br><br><br><br><br>

Answer 2

在單擊處理程序中創建對事件的引用。

$("#saveAppt").click(function(e){

然后在 AJAX 調用后對該事件調用 preventDefault 函數。

     $.ajax
      ({
        type: "GET",
        dataType : 'json',
        async: false,
        url: 'save-appointments.php',
        data: { data: JSON.stringify(jAppointment) },
        success: function () {console.log("Thanks!"); },
        failure: function() {console.log("Error!");}
      });
      e.preventDefault();