Question

我有一个html选择列表，我想用它来过滤li列表中的数据。当用户选择列表选项时，li列表将根据选择进行过滤。所有这些数据都存储在数据库中。我想要做的是在jquery中的change事件检查所选选项的值，然后将该数据发送到服务器以用作查询数据库的参数。

HTML：

<select id="universeList">
   <option data-id="1">DC</option>
   <option data-id="2">Marvel</option>
</select>

<ul id="#heroesList">
  <li>Superman</li>
  <li>Iron Man</li>
  <li>SpiderMan</li>
  <li>Captain America</li>
  <li>Hulk</li>
  <li>Batman</li>
  <li>Flash</li>
</ul>

JS：

$(document).on("ready", function() {

  //ajax call to populate dropdown
   $.ajax({
        type: "GET",
        url: "getUniverseList.php",
        dataType: 'json',
        cache: false,
        success: function(results) {
            console.log(results);
            $.each(results, function(index, result) {
                console.log(result);

                $('#universeList').append('<option data-id="'+result.universeID+'">'+result.universe+'</option>');


            });
        }
    });

    //ajax call populate heroes list
    $.ajax({
        type: "GET",
        url: "getheroesList.php",
        dataType: 'json',
        cache: false,
        success: function(results) {
            console.log(results);
            $.each(results, function(index, result) {
                console.log(result);

                $('#heroesList').append('<li data-id="'+result.heroesID+'">'+result.heroes+'</li>');


            });
        }
    });

$(document).on('change', '#universeList', function(){
    var universeSel = $('#universeList option:selected').data('id');
    $('#heroesList li').each( function() {
        $(this).remove();
    });

    console.log(manikinSel);
    $.ajax({
        type:"GET",
        url:"getheroesFilter.php",
        dataType: 'json',
        data: ( {name: universeSel} ),
        cache: false,
        success: function(results) {

            console.log(results);


    }

});

});

});

PHP：

<?php   

//db information

$mid = $_POST['manikinSel'];


$sql = "Select universeID, heroesID From heroesmanikins bm 
    INNER JOIN heroesList b 
    ON bm.heroesId=b.heroesId
    INNER join heroessList m
    ON bm.universeID=m.universeId
    WHERE heroesID=`$mid`
    ";


 try {
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $dbh->query($sql);  
$stmt->execute();
$employee = $stmt->fetchAll(PDO::FETCH_OBJ);
$dbh = null;
echo  json_encode($employee) ; 
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}

?>

fiddle

我使用ID来匹配表，并将ID作为选项列表的数据属性。我想将Universe的ID发送回php，这样它就可以用来查询db表中的匹配ID。

我无法弄清楚为什么我的'data：（{name：universeSel}）'没有将数据发送到服务器。

使用ajax调用将参数发送到php

0 个答案: