PHP-jquery-ajax动态依赖选择-难度

Question

我正在编写一个具有动态依赖选择的简单表单。 有两个文件。 一个是内部包含html，javascript和php的php文件，第二个是获取第二个选择的数据并以json格式发送回去的php文件。 在第一个（和主）文件中，我具有带有两个选择字段的表单。 第一个字段用于省，第二个字段用于城镇。 数据在一个MySQL数据库中，有两个表，省（table行）的省份（103行）和镇（城镇的表名）（8000行）。 通常，通常照常连接到数据库，并使用JavaScript链接链接到jquery。 首先，使用php从数据库的table_provinces中获取值，从而获得第一个选择字段的省选项。 然后使用javascript“ on（'change'，function（）{在这里，我使用ajax ...}） ”我将使用ajax的选定值传递给一个php文件，该文件可能会从table_towns中提取城镇并返回（以json格式）值以填充第二个选择字段。 Javascript正确地从第一个选择字段中获得了选定的值（我使用警报来知道它），但是什么也没有发生。 这就是代码。

链接到jQuery：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

HTML首先选择字段：

 <form method="post" action="usemychoice.php"> <select id="province" name="province" color="white"> <option value="" selected>Select a province</option> 

这是我填充第一个选择字段的方式：

 <?php $sql = "SELECT * FROM table_provinces"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { echo "<option value='".$row['prov']."'>".$row['extended_province']."</option>"; } } else { echo "Error: .........."; } ?> 

在使用/ select关闭该字段之后，我获得了以下代码来获取用于填充城镇名称的值（第二个选择字段）：

 <script type="text/javascript"> $(document).ready(function(){ $('#province').on('change',function(){ var provinceID = $(this).val(); if(provinceID){ window.alert("ok you've chosen the province "+provinceID); $.ajax({ type:'POST', url:'get_towns.php', data: 'prov='+provinceID, success:function(html){ $('#town').html(html); } }); }else{ $('#town').html('<option value="">Please select the province first</option>'); } }); }); </script> 

这是get_town.php代码：

 <?php //*****after a require to the connection db routine" if(!empty($_POST["prov"])) { $sql = "SELECT * FROM table_towns WHERE prov LIKE '%" .$_POST['prov']."%'"; $result = mysqli_query($conn, $sql); $json = []; if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $json[$row['prov']] = $row['town']; } else { echo "Error: ................."; } echo json_encode($json); } ?> 

最后我有了html代码：

 <select id="town" name="town" color="white"> <option value="" selected>Select province first</option> 

归根结底，代码有问题，因为我没有从get_town.php返回任何数据来填充第二个选择字段，并且因为我没有看到window.alert，所以我将其放置在检查正在进行的执行（您在此处发布的代码中看不到它），似乎未执行。 有什么帮助吗？

Answer 1

 url:'get_towns.php',

没有复数形式的get_town.php吗？

Answer 2

显然， get_town.php的输出是JSON

echo json_encode($json);

但是在您的JS中，它直接输出到html元素

$('#town').html(html);

解：

修改get_town.php以发送html或修改JS中的成功函数以将接收到的JSON转换为正确的html。

我希望这将有所帮助。

更新：

替换这部分php

while($row = mysqli_fetch_assoc($result)) {

    $json[$row['prov']] = $row['town'];

}

有东西

echo '<option value="" selected>Select Town</option>';

while($row = mysqli_fetch_assoc($result)) {

    echo '<option  value="'.$row['town'].'" color="white">'.$row['town'].'</option>';

}

最后删除线

echo json_encode($json);