無法將數據從ajax調用發送到php以獲取數據庫值

Question

我從數據庫中檢索數據時遇到問題。

在我的Ajax調用中，我已經測試了表單值，並且該表單值有效。

$(document).ready(function(){
$("form#form").submit(function(event) {
    event.preventDefault();
    var color = $('#Color').val();
    var radio = $('input[name="filter_opties"]:checked').val();
    filter(color, radio);
    $.ajax({
        type: "POST",
        url: "db_querys.php",
        data: {'color' : color, 'radio' : radio},
        success: function(data) {
            alert(data);
        }
    });
});

但是在db_querys.php中，我無法獲得color和radio的值。

<?php
$gekozenGemeente = $_POST['color'];
$gekozenCategorie = $_POST['radio']; 

if($gekozenGemeente != null)
  {
  echo $gekozenGemeente . $gekozenCategorie;
  }
else
  {
  echo "<br> Values are null";
  }
?>

這是我的表格：

<form id = "form" action="#" method="post" >
    <!----- Select Option Fields Starts Here ----->
    <label class="heading">Selecteer uw gemeente:</label>
    <br>
    <select name="Color" id="Color">
        <option value="heemstede">Heemstede</option>
        <option value="bloemendaal">Bloemendaal</option>
    </select>
    <br>
    <!---- Radio Button Starts Here ----->
    <label class="heading">Radio Buttons :</label><br>
    <input type="radio" id="radio1" name="filter_opties" value="Betaald"><label for="radio1">Betaald</label><br/>
    <input type="radio" id="radio2" name="filter_opties" value="Vergunning"><label for="radio2">Vergunning</label><br/>
    <input type="radio" id="radio3" name="filter_opties" value="Blauwe zone"><label for="radio3">Blauwe zone</label><br/>
    <br>
    <input id= "submit" name="submit" type="submit" value="Get Selected Values" onclick="filter()">
</form>

你們能解釋我所缺少的嗎？

編輯：添加了篩選器功能。

function filter(color, radio){

    var locations = <?= json_encode($markers_json ); ?>;
    var locations2 = JSON.parse(locations);


    var polygons = <?=json_encode($polygons_json );?>;
    //var polygons2 = JSON.parse(polygons);
    //document.getElementById("demo").innerHTML = polygons2;


    initialize(locations2,polygons)

      }

Answer 1

$(document).ready(function(){
$("#form").submit(function(event) {
    event.preventDefault();
    var color = $('#Color').val();
    var radio = $('input[name="filter_opties"]:checked').val();
    filter(color, radio);
    $.ajax({
        type: "POST",
        url: "db_querys.php",
        data: {'color' : color, 'radio' : radio},
        success: function(data) {
            alert(data);
        }
    });
});