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

Question

我正在编写一个带有动态相关选择的简单表单。有两个文件。一个是一个php文件，里面有html、javascript和php，第二个是一个php文件，用于获取第二个选择的数据并以json格式发送回来。在第一个（也是主）文件中，我有一个带有两个选择字段的表单。第一个字段是省，第二个是城镇。数据在一个 MySQL 数据库中，有两个表，table_provinces 用于省（103 行）和 table_towns 用于城镇（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中的success函数，将接收到的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);