发送JavaScript表单后如何重定向页面

Question

Hello I have this form that uses js that after you click the the approve button it will change the button to success and send the data, it will run a php script to update the database. That part is working however I would like to reload the page after the information is sent but everything i've tried will not work. Here is what i currently have.

js

$("#approvePirep").on("click", function() {
var a = $(this).data("ppm"), n = $(this).data("pid"), s = $(this).data("pirep-id"), e = $(this);
    $.ajax("includes/ajax/noc/acceptpirep.php?pid=" + n + "&ppm=" + a + "&pirepid=" + s).done(function(a) {
        "1" == a ? e.removeClass("btn-primary").addClass("btn-success") : e.removeClass("btn-primary").addClass("btn-danger");
    }).fail(function() {
        e.removeClass("btn-primary").addClass("btn-danger");
    });
 window.location.href = "https://virtualua.org/ams/index.php?page=noc";
})

php of the information being sent

<?php
require("checkstaff.php");
require("../../logaction.php");

function distance($lat1, $lon1, $lat2, $lon2, $unit = "N") {
    $theta = $lon1 - $lon2;
    $dist = sin(deg2rad((float)$lat1)) * sin(deg2rad((float)$lat2)) + cos(deg2rad((float)$lat1)) * cos(deg2rad((float)$lat2)) * cos(deg2rad((float)$theta));
    $dist = acos($dist);
    $dist = rad2deg($dist);
    $miles = $dist * 60 * 1.1515;

    return ($miles * 0.8684);
}

function getAirportValue($icao, $col) {
  global $pdo;

  $query = $pdo->prepare("SELECT $col FROM airports WHERE icao = ?");
  $query->execute([$icao]);
  return $query->fetchColumn();
}

function ppm($point_value) {
  if ($point_value < "25000") {
    $ppm = 1;
  }
  if ($point_value >= "25000" AND $point_value < "49999") {
    $ppm = 3;
  }
  if ($point_value >= "50000" AND $point_value < "99999") {
    $ppm = 5;
  }
  if ($point_value >= "100000" AND $point_value < "149999") {
    $ppm = 8;
  }
  if ($point_value >= "150000") {
    $ppm = 10;
  }
  return $ppm;
}

function calcPoints($dep, $arr) {

  $dep_lat = getAirportValue($dep, "latitude");
  $dep_lon = getAirportValue($dep, "longitude");
  $arr_lat = getAirportValue($arr, "latitude");
  $arr_lon = getAirportValue($arr, "longitude");

  $pointpermile = ppm($_GET['ppm']);

  $distance = distance($dep_lat, $dep_lon, $arr_lat, $arr_lon, "n");

  return round($distance * $pointpermile);
}

if(isStaff() == true) {
  if(isset($_GET['pid']) && $_GET['pirepid']) {
    $pinfo = $pdo->prepare("SELECT * FROM pireps WHERE id = ?");
    $pinfo->execute([$_GET['pirepid']]);
    $pinfo = $pinfo->fetch(PDO::FETCH_ASSOC);

    $query = $pdo->prepare("UPDATE pireps SET status = 1 WHERE id = ?")->execute([$_GET['pirepid']]);
    $query1 = $pdo->prepare("UPDATE pilots SET hours = hours + ?, points = points + ?, last_airport = ?, flights = flights + 1, lastpirep = UNIX_TIMESTAMP()  WHERE id = ?")->execute([$pinfo['time'], calcPoints($pinfo['dep'], $pinfo['arr']), $pinfo['arr'], $_GET['pid']]);

    logAction($_GET['pid'], "Accepted PIREP #".$_GET['pirepid']);

    echo 1;
  } else {
    echo 0;
  }
} else {
  echo 0;
}

?>

and the html and php of the modal that this form is in

<div class="modal fade" id="pirep<?= $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="pirep<?= $row['id']; ?>Label" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="pirep<?= $row['id']; ?>Label">Viewing PIREP #<?= $row['id']; ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="row m-2">
        <div class="col-md-4">Pilot:</div>
        <div class="col-md-8"><?= $userInfo['login']." - ".$userInfo['fname']." ".$userInfo['lname']." (".$userInfo['rank'].")"; ?></div>
      </div>
      <div class="row m-2">
        <div class="col-md-4">Flight:</div>
        <div class="col-md-8"><?= $row['fnum']." (".$row['dep']." - ".$row['arr'].")"; ?></div>
      </div>
      <div class="row m-2">
        <div class="col-md-4">Date:</div>
        <div class="col-md-8"><?= date('m/d/Y', $row['date']); ?></div>
      </div>
      <div class="row m-2">
        <div class="col-md-4">Time:</div>
        <div class="col-md-8"><?= $row['time']; ?></div>
      </div>
      <div class="row m-2">
        <div class="col-md-4">Route:</div>
        <div class="col-md-8"><?= $row['route']; ?></div>
      </div>
      <div class="row m-2">
        <div class="col-md-4">Aircraft:</div>
        <div class="col-md-8"><?= $row['ac']; ?></div>
      </div>
      <div class="row m-2">
        <div class="col-md-4">A/C Code:</div>
        <div class="col-md-8">
          <div class="input-group">
            <input type="text" class="form-control" value="<?= $row['ac_code']; ?>">
            <span class="input-group-btn">
              <button class="btn btn-secondary" type="button" id="updatePirepAC" data-pid="<?= $row['pid']; ?>" data-pirep-id="<?= $row['id']; ?>"><i class="material-icons">check</i></button>
            </span>
          </div>
        </div>
      </div>
      <div class="row m-2">
        <div class="col-md-4">Landing Rate:</div>
        <div class="col-md-8"><?= $row['landingrate']; ?> FPM</div>
      </div>
      <div class="row m-2">
        <div class="col-md-4">Pilot Comments:</div>
        <?php
          if (strpos($row['comments'], "Manual CCS Report") !== false){
              echo  "<div class='col-md-8'><a href='" . substr($row['comments'], 0, strpos($row['comments'],"|")) . "' target='_blank'>".$row['comments'] . "</a></div>";
          } else {
              echo  "<div class='col-md-8'>" . $row['comments'] . "</div>";
          }
        ?>
      </div>
      <div class="row m-2">
          <div class="col-md-4">System Comments:</div>
          <div class="col-md-8"><?= $row['acomments']; ?></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" id="rejectPirep" data-pid="<?= $row['pid']; ?>" data-pirep-id="<?= $row['id']; ?>" data-toggle="tooltip" data-placement="top" data-animation="false" title="Reject"><i class="material-icons">close</i></button>
        <button type="button" class="btn btn-primary" name="approvePirep" id="approvePirep" data-pid="<?= $row['pid']; ?>" data-pirep-id="<?= $row['id']; ?>" data-ppm="<?= $userInfo['points']; ?>" data-toggle="tooltip" data-placement="top" data-animation="false" title="Accept"><i class="material-icons">check</i></button>
      </div>
    </div>
  </div>
</div>

Answer 1

Remove this line from your JS:

window.location.href = "https://virtualua.org/ams/index.php?page=noc";

and relocate it inside .done() ajax call.

You should re-direct the page after you have received a reply from ajax ..

$.ajax("includes/ajax/noc/acceptpirep.php?pid=" + n + "&ppm=" + a + "&pirepid=" + s).done(function(a) {
        "1" == a ? e.removeClass("btn-primary").addClass("btn-success") : e.removeClass("btn-primary").addClass("btn-danger");

        window.location.href = "https://virtualua.org/ams/index.php? page=noc";   //here
    }).fail(function() {
        e.removeClass("btn-primary").addClass("btn-danger");
    });

Answer 2

This may be happening because your code is executing asynchronously & you are not aware of that. Just move your reload code inside the success/error (as you need) callback like this-

$("#approvePirep").on("click", function() {
var a = $(this).data("ppm"), n = $(this).data("pid"), s = $(this).data("pirep-id"), e = $(this);
    $.ajax("includes/ajax/noc/acceptpirep.php?pid=" + n + "&ppm=" + a + "&pirepid=" + s).done(function(a) {
        "1" == a ? e.removeClass("btn-primary").addClass("btn-success") : e.removeClass("btn-primary").addClass("btn-danger");
        // here
        window.location.href = "https://virtualua.org/ams/index.php?page=noc";
    }).fail(function() {
        e.removeClass("btn-primary").addClass("btn-danger");
    });
})

Answer 3

我将window.location.href更改为location.href，它可以正确刷新页面，我确实按照建议的方法尝试了location.reload，但是它正在重新加载页面，并且下次打开新的模式来接受另一个pirep时，它将从最后一种格式中引入了一些但不是全部数据，但是通过上面的解决方案已解决。