javascript - 使用 AJAX 和 JQuery 在没有页面刷新的情况下提交表单时遇到问题

Question

我收到显示此数据字符串的成功警报，但由于某种原因我的 PHP 代码未执行，或者它确实不成功，我不确定是哪一个。谢谢。

inputPlantSite=Syncrude+Base+Mine&inputRouteNumber=aafdfadsfadsafds&inputStopNumber=asfdafdsasfdafds&inputLatitude=57.90609313959766&inputLongitude=-113.4063720703125&inputStreetName=asfdafdsasfdafds&inputArrivalTime=asfdafdsasfdafds&inputDayOfWeek=Weekday&inputDirectionOfBus=Town+to+Site&inputWhatShift=asfdafdsasfdafds&markerVariable=addmarker

这是我的 Ajax/Jquery

 $(function() {
  $("#submit_marker").click(function(e) { e.preventDefault();
    var inputPlantSite = $("#inputPlantSite").val();
    var inputRouteNumber = $("#inputRouteNumber").val();
    var inputStopNumber = $("#inputStopNumber").val();
    var inputLatitude = $("#inputLatitude").val();
    var inputLongitude = $("#inputLongitude").val();
    var inputStreetName = $("#inputStreetName").val();
    var inputArrivalTime = $("#inputArrivalTime").val();
    var inputDayOfWeek = $("#inputDayOfWeek").val();
    var inputDirectionOfBus = $("#inputDirectionOfBus").val();
    var inputWhatShift = $("#inputWhatShift").val();
    var inputAddMarker = $("#inputAddMarker").val();
    var inputUpdateMarker = $("#inputUpdateMarker").val();
    var inputDeleteMarker = $("#inputDeleteMarker").val();
    var dataString = $('#formManageMarker').serialize();
    alert(dataString);

    $.ajax({
      type: "POST",
      url: "php/addmarker.php",
      data: dataString,
dataType: "json",
      success: function() {
        alert("Successfully added marker");
      }
    });
    return false;
  });
});

这是我的表格:

    <form name="formManageMarker" method="post" action="">
      <select name="inputPlantSite" class="input-block-level" id="inputPlantSite">
      <option value="Syncrude Base Mine">Syncrude Base Mine</option>
      <option value="Syncrude Base Plant">Syncrude Base Plant</option>
      <option value="Syncrude Aurora Base Mine">Syncrude Aurora Base Mine</option>
      <option value="Syncrude Aurora Base Plant">Syncrude Aurora Base Plant</option>
      <option value="Suncor Base Mine">Suncor Base Mine</option>
      <option value="Suncor Base Plant">Suncor Base Plant</option>
      <option value="Suncor Firebag">Suncor Firebag</option>
      <option value="Albian Sands">Albian Sands</option>
      </select>
        <input type="text" class="input-block-level" placeholder="Route Number e.g. 1" name="inputRouteNumber" id="inputRouteNumber">
        <input type="text" class="input-block-level" placeholder="Stop Number e.g. 1" name="inputStopNumber" id="inputStopNumber">
        <input type="text" class="input-block-level" placeholder="Latitude" name="inputLatitude" id="inputLatitude">
        <input type="text" class="input-block-level" placeholder="Longitude" name="inputLongitude" id="inputLongitude">
        <input type="text" class="input-block-level" placeholder="Street Name" name="inputStreetName" id="inputStreetName">
        <input type="text" class="input-block-level" placeholder="Arrival Time e.g. 6:00am" name="inputArrivalTime" id="inputArrivalTime">
        <select name="inputDayOfWeek" class="input-block-level" id="inputDayOfWeek">
          <option value="Weekday">Weekday</option>
          <option value="Weekend">Weekend</option>
          <option value="ADO">ADO</option>
        </select>
        <select name="inputDirectionOfBus" class="input-block-level" id="inputDirectionOfBus">
        <option value="Town to Site">Town To Site</option>
        <option value="Site To Town">Site To Town</option>
        </select>
        <input type="text" name="inputWhatShift" id="inputWhatShift" class="input-block-level" placeholder="What Shift e.g. Day Night">
        <select name="markerVariable" class="input-block-level">
          <option value="addmarker" class="alert-success">Add Marker</option>
          <option value="updatemarker" class="alert-info">Update Marker</option>
          <option value="deletemarker" class="alert-error">Delete Marker</option>
        </select>

        <button type="submit" name="addmarker" id="submit_marker" class="btn btn-info btn-large">Create Marker</button>
  </form>

PHP 文件:

   <?php
require_once('./config.inc.php');

$plantsite = $_POST['inputPlantSite'];
$routenumber = $_POST['inputRouteNumber'];
$stopnumber = $_POST['inputStopNumber'];
$latitude = $_POST['inputLatitude'];
$longitude = $_POST['inputLongitude'];
$streetname = $_POST['inputStreetName'];
$markertitle = "Stop $stopnumber Route $routenumber";
$arrivaltime = $_POST['inputArrivalTime'];
$directionofbus = $_POST['inputDirectionOfBus'];
$whatshift = $_POST['inputWhatShift'];
$inputSearchSite = $_POST['inputSearchSite'];
$inputSearchRoute = $_POST['inputSearchRoute'];
$dayofweek = $_POST['inputDayOfWeek'];
$inputMarkerVariable = $_POST['markerVariable'];
$success = 0;

/* Connect to Database */
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_BASE);
if (mysqli_connect_errno()) {
    printf('Connect failed: %s\n', mysqli_connect_error());
    exit();
}
if ($stmt = $mysqli -> prepare("SELECT Latitude, Longitude, Title, Arrival_Time, Direction_Of_Bus, What_Shift FROM Routes")) {
    $stmt -> execute();
    $stmt -> bind_result($gLatitude, $gLongitude, $gTitle, $gArrivalTime, $gDirectionOfBus, $gwhatShift);


}

if ($inputMarkerVariable == "addmarker") {
  /* Check fields */
  if ((!empty($stopnumber)) && (!empty($whatshift)) && (!empty($routenumber)) && (!empty($latitude))
      && (!empty($longitude)) && (!empty($streetname)) && (!empty($arrivaltime))) {

    /* Connect to the Database */

    $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_BASE);
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    /* Get ready to query database */

    if ($stmt = $mysqli -> prepare("INSERT INTO Routes (Plant_Site, Route_Number, Stop_Number, Street_Name,
                                   Latitude, Longitude, Title, Arrival_Time, Day_Of_Week,
                                   Added_By, Direction_Of_Bus, What_Shift, Updated_At, Created_At)
                                   VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW(), NOW())")) {

      /* Bind Parameters */

      $stmt -> bind_param('ssssssssssss', $plantsite, $routenumber, $stopnumber, $streetname,
                          $latitude, $longitude, $markertitle,
                          $arrivaltime, $dayofweek, $sesh_email, $directionofbus, $whatshift);

      /* Exceute and send it to database */

      $stmt -> execute();

      $success = 1;
      json_encode(true);
      json_encode(false);

      $stmt -> close();


      if ($stmt = $mysqli -> prepare("SELECT Latitude, Longitude, Title, Arrival_Time, Direction_Of_Bus, What_Shift FROM Routes")) {
        $stmt -> execute();
        $stmt -> bind_result($gLatitude, $gLongitude, $gTitle, $gArrivalTime, $gDirectionOfBus, $gwhatShift);




}


    } else {
      printf('Couldnt make a connection');
    }
  } else { $alertmarker = "Not all fields are filled out"; }
}


if (isset($_POST['inputSortMarkers'])) {
    $mysqli -> mysqli(DB_HOST, DB_USER, DB_PASS, DB_BASE);
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }

    /* Get Ready to Sort Markers */

    if ($stmt = $mysqli -> prepare("SELECT Latitude, Longitude, Title, Arrival_Time, Direction_Of_Bus, What_Shift FROM Routes WHERE Plant_Site = ? AND Route_Number = ?")) {
        $stmt -> bind_param('si', $inputSearchSite, $inputSearchRoute);
        $stmt -> execute();
        $stmt -> bind_result($gLatitude, $gLongitude, $gTitle, $gArrivalTime, $gDirectionOfBus, $gwhatShift);
        printf('Worked');
    }

}




?>

Answer 1

您的代码中有return false，因此下面的代码永远不会执行。

您也可以使用 $('form').serialize(); 发送数据串。

并使用下面的代码。

$("#submit_marker").click(function(e) { e.preventDefault();

以上代码将强制按钮只执行click事件代码。