时间戳

首页 > 解决方案 > PHP-jquery-ajax 动态依赖选择 - 难度

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

问题描述

我正在编写一个带有动态相关选择的简单表单。有两个文件。一个是一个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检查正在进行的执行（您在此处发布的代码中看不到它），似乎没有执行。有什么帮助吗？

标签： javascriptphpjqueryajaxselect

解决方案

 url:'get_towns.php',

不是get_town.php没有复数吗？

推荐阅读