Javascript 使用AJAX和JQuery提交表单而不刷新页面时出现问题

我收到了显示此数据字符串的成功警报，但由于某些原因，我的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');
    }

}




?>

---

尝试对连接到数据字符串中的每个变量进行编码：

dataString = 'inputPlantSite=' + encodeURIComponent(inputPlantSite) + '&..=' + encodeURIComponent(..)

---

尝试像这样序列化您的信息

 var serialized = $(dataString).serialize(); 

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

---

.serialize（）方法以标准URL编码表示法创建文本字符串。它对表示一组表单元素的jQuery对象进行操作

您的代码中有

return false

，因此下面的代码永远不会执行

您还可以使用

$（'form'）.serialize（）

发送数据字符串

并使用下面的代码

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

上述代码将强制

按钮

仅执行

单击事件代码。
尝试以下操作：

$.post('php/addmarker.php',{
    //param : value
    inputPlantSite : inputPlantSite,
    inputRouteNumber : inputRouteNumber,
    inputStopNumber : inputStopNumber,
    inputLatitude : inputLatitude,
    inputLongitude : inputLongitude,
    inputStreetName : inputStreetName,
    inputArrivalTime : inputArrivalTime,
    inputDayOfWeek : inputDayOfWeek,
    inputDirectionOfBus : inputDirectionOfBus,
    inputWhatShift : inputWhatShift,
    inputAddMarker : inputAddMarker,
    inputUpdateMarker : inputUpdateMarker,
    inputDeleteMarker : inputDeleteMarker
  },function(data){
    console.log(data);
    alert("Successfully added marker");
  });

是
警报（数据串）；返回false在脚本中可用吗
return false
将终止函数的执行。@Sheikheera是这样，但仅在调试时，您可以看到每个变量都没有加载，只有第一个变量我不确定您的问题是什么。你需要帮助的实际问题是什么？你检查过这篇文章了吗<该帖子中显示的code>formselector
与您答案中的
datastring
不同。你自己试试吧。。。在jsfiddle.net中创建一个演示并尝试序列化
datastring
你能看到我在原始帖子中更新的脚本并告诉我为什么它没有添加到数据库中吗，请记住成功警报正在触发，那么这是否意味着这是PHP方面的问题呢？@XCritics如果它显示您成功添加了标记，那么服务器端可能会有错误……但是如果您的服务器端脚本失败，那么我认为它不会提示成功代码。但是我可以看到PHP代码吗。它现在就在主要帖子的正文中。有什么问题吗？@XCritics尝试返回json_encode true或false…并在ajax调用中设置数据类型：“json”