如何使用ajax

时间:2017-09-08 23:52:01

标签: javascript php html mysql ajax

我试图将使用Ajax的select选项输入的值传递到另一个页面PHP并获取数据库并将数据提取到select选项中。但是,我的问题是在第二个选择选项中没有显示任何内容。

我有一个名为国家/地区的选项,其中包含国家1,国家2,国家3,国家/地区4,其中包含cid 1,2,3,4。

我想要的是将国家ID(cid)传递到getdata.php并查询包含城市a,城市b,城市c等的城市数据库,并使用Ajax将城市数据提取到选择选项。

当我选择国家/地区时,我需要动态更改城市选择选项。

这是我的数据库结构:

Country.db

enter image description here

City.db

enter image description here

这是我的剧本:

dropdown.php

<?php

    require_once "connection.php";
?>

<html>
<head>
    <title>Dropdown ajax</title>
</head>
<body>


<div class="country" >
    <label>Country</label>
    <select name="country" onchange="getId(this.value);">
    <option value=""> -- Select Country -- </option>

    <!-- populate value using php -->

    <?php
        $query = "SELECT * FROM country";
        $result = mysqli_query($con,$query);

        //loop

        foreach ($result as $country) {
        ?>
            <option value="<?php echo $country["cid"]; ?>"> <?php echo $country["country"]; ?> </option>

        <?php 
            } 
        ?>

</select>
</div>
<div class="city">
    <label>City</label>
    <select name="city" id="cityList">

        <option value=""></option>

    </select>
</div>
<script src="jquery-3.2.1.min"></script>
<script type="text/javascript">
    function getId(val){
        // ajax function

        $.ajax({
            type:"POST",
            url:"getdata.php",
            data:"cid="+val,
            success:function(data){
                $(#cityList).html(data);
            }
        });
    }
</script>

</body>
</html>

从下拉列表中,我尝试使用ajax将cid传递到getdata.php并将数据库提取到drop-down.php中的select选项

访问getdata.php

<?php

require_once "connection.php";

if(!empty($_POST["cid"])){
    $cid = $_POST["cid"];
    $query = "SELECT * FROM city WHERE cid = $cid";
    $result = mysqli_query($con,$query);

    foreach ($result as $city) {

    ?>
    <option value="<?php echo $city["cityId"];?>"><?php echo $city["city"];?></option>

    <?php       
    }
}

?>

这是我的connection.php

<?php
    $con = mysqli_connect("localhost","root","admin","dropdowndb");

    //check connection
    if(mysqli_connect_errno()){
        echo "Failed to connect :".mysqli_connect_errno();
    }
?>

结果如下:

enter image description here

那么如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

ajax成功处理程序中的选择器必须是字符串,而不是标识符:

success:function(data){
  $('#cityList').html(data);
}