Ajax 避免重新加载页面

Question

我试图对后端的 ajax 进行验证，并发送数据并正常工作，但是当数据从后端返回时出现问题，因为它正在重新加载页面并删除返回的消息

    <script>

    $(document).ready(function() {
  // Cache selectors to make them a bit shorter and more performant
    $pwd_error = $('#password_result_error').hide();
  $pwd_blank = $('#current_password_blank').hide();

  $('#new_password').focus(function(event) {
    data = $('#current_password').val();
    var len = data.length;
    if (len < 1) {
      //alert("Password cannot be blank");
      $pwd_blank.show();

    } else {
      $pwd_blank.hide();
    }

    $('#change_password').click(function() {

    if ($('#new_password').val() != $('#confirm_new_password').val()) {
       $pwd_error.show();
    } else {

      $pwd_error.hide();


    }
  });
});
  // Attach listener globally (and only once)
  $('form#form_change_password').submit(function(e) {
    if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
      e.preventDefault();

    } else {
        var change_password = $("#form_change_password").serialize();
                 $.post(
                        "backend/ajax/update_password.php",
                        change_password
                 ).done(function(data) {

                        $("#change_password_result").html(data);


                 }).fail(function () {
                          //alert("Error submitting forms!");
                 })

    }
  });
});

     </script>

     <hr>
     <div class="container text-center">
     <h1><?php $lang ['change_password']; ?></h1>
      <form id="form_change_password">
     <div class="form-group">
   <!--  <label for="current_password"><?php echo $lang 'current_password']; ?> </label> -->
    <input type="password" class="form-control" id="current_password" name="current_password" placeholder="<?php echo $lang ['current_password']; ?>">
    </div>
    <div id="current_password_blank" class="alert-danger"><i  class="fa fa-exclamation-circle"></i>&nbsp;<?php echo $lang ['current_password_can_not_be_blank']; ?></div>
     <div class="form-group">
    <label for="new_password"><?php echo $lang ['new_password']; ?></label>
    <input type="password" class="form-control" id="new_password" name="new_password" placeholder="<?php echo $lang ['new_password']; ?>">
    </div>
    <div class="form-group">
    <label for="confirm_new_password"><?php echo $lang ['confirm_new_password']; ?></label>
     <input type="password" class="form-control" id="confirm_new_password" name="confirm_new_password" placeholder="<?php echo $lang ['confirm_new_password']; ?>">
    </div>
    <div id="password_result_error" class="alert-danger"><i  class="fa fa-exclamation-circle"></i>&nbsp;<?php echo $lang ['password_do_not_match']; ?></div>
    <div id="change_password_result"></div>
    <div class="text-center">
  <button type="submit" id="change_password" class="btn btn-success"><?php echo $lang ['change_password']; ?></button>
  </div></form>
    </div>

我试图阻止提交时重新加载，但它不通过 ajax 发送数据，此代码现在工作正常，但我需要防止提交时重新加载，但也不影响其上的 ajax。 如何防止页面在提交时重新加载，而不影响发送到后端的ajax数据？

Answer 1

$('form#form_change_password').submit(function (e) {
    e.preventDefault();
    if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
        // Don't call the api if form has error
        return
    }
    var change_password = $("#form_change_password").serialize();
    $.post(
        "backend/ajax/update_password.php",
        change_password
    ).done(function (data) {
        $("#change_password_result").html(data);
    }).fail(function () {
        //alert("Error submitting forms!");
    })
});