Проблемы с отправкой формы без обновления страницы с использованием 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 File:

<?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(); 

выше код заставит button выполнить только click код события.

Answer 2

Попробуйте кодирования каждой переменной быть объединены в dataString:

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

Answer 3

Попробуйте сериализации информацию, как это ..

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

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

Метод .serialize() создает текстовую строку в стандартный URL-кодированных обозначений. Он работает с объектом jQuery, представляющим набор элементов формы.

Answer 4

попробовать это:

$.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"); 
    });