Javascript 基于另一个下拉列表填充下拉列表

我试图使用ajax在php中的另一个组合框上填充组合框。我创建了两个文件category_dropdown.php和subcategory_dropdown.php

我的category_dropdown.php文件如下所示

<?php
include 'connect.php';
$q = mysql_query("select * from category") or die(mysql_error());
if (mysql_num_rows($q)) {
$data = array();
while ($row = mysql_fetch_array($q)) {
$data[] = array(
'id' => $row['category_id'],
'name' => $row['category_name']
);
}
header('Content-type : application/json');
echo json_encode($data);
}

<?php
include 'connect.php';
if(isset($_GET["catname"])){
$c=$_GET["catname"];
$q=  mysql_query("select * from subcategory where cat_id='$c'") or         die(mysql_error());
if(mysql_num_rows($q)){
$data=array();
while($row=  mysql_fetch_array($q)){
$data[]=array(
'id'=>$row['sub_id'],
'name'=>$row['sub_name'],
);
}
header('Content-type : application/json');
echo json_encode($data);
}else{
echo 'error';
}
}

---

我的建议是首先运行查询并测试SQL。如果您知道您的SQL正在工作，那么我将测试您的PHP，并通过设置一些静态测试变量来确保逻辑正常工作。如果这样做行得通，那么您就知道这很可能是您的AJAX调用。还可以尝试按照caCtus的建议在浏览器中运行Console窗口。JS控制台可以成为救星。一开始可能看起来有点乏味，但排除每个技术层是值得的，因为它可以更好地隔离和识别问题所在
 PHP代码是否返回任何错误？您应该使用JS控制台来检查返回的内容，并能够对此进行调试。您好，当我尝试运行category_dropdown.php时，它不会返回任何内容。输出为null。我想这就是问题所在。您知道为什么会发生这种情况吗？请看一看：现在我遇到一个错误“弃用：mysql_connect（）：mysql扩展已弃用，将在将来删除”我在stackoverflow中读到了一些关于这方面的文章。我很困惑，因为我在我的计算机中的另一个项目中使用了相同的代码。它工作正常。但事实并非如此。这怎么可能？以下是关于不推荐使用的函数的解释：。这不会阻止代码工作，但如果升级PHP版本，可能会出现问题。最好开始使用另一个函数/扩展。现在我得到一个错误“弃用：mysql\u connect（）：mysql扩展已弃用，将在将来删除”我在stackoverflow上读到了一些关于这方面的文章。我很困惑，因为我在我的计算机上的另一个项目中使用了相同的代码。它工作正常。但事实并非如此。怎么可能？你在以前的项目中使用了不同的版本吗？您可能还使用了与mysql_connect（）冲突的最新PHP版本的语法或功能；。如果不知道这两个项目是如何配置的，就很难提供准确的答案。不，我在两个项目中使用相同的版本。实际上，这些代码是从以前的项目复制的。我不知道发生了什么。我试着只用index.php中的php手动填充组合框。然后它就开始工作了。但是它在category_dropdown.php文件上不工作。
<script type="text/javascript">
    $(document).ready(function() {
        Category();
        $("#cat").change(function() {
            var textbox3 = document.getElementById('cat');
            val = textbox3.value;
            Sub(val);
        });
    });


    function Category() {
        $('#cat').empty();
        $('#cat').append("<option>Loading....</option>");
        $('#subcat').append("<option>--Select SubCategory--</option>");
        $.ajax({
            type: "POST",
            url: "category_dropdown.php",
            contentTYpe: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                $('#cat').empty();
                $('#cat').append("<option value='0'>--Select Category--</option>");
                $.each(data, function(i, item) {
                    $('#cat').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                });
            },
            complete: function() {}
        });
    }

    function Sub(catname) {
        $('#subcat').empty();
        $('#subcat').append("<option>Loading....</option>");
        $.ajax({
            type: "POST",
            url: "subcategory_dropdown.php?catname=" + catname,
            contentTYpe: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                $('#subcat').empty();
                $('#subcat').append("<option value='0'>--Select SubCategory--</option>");
                $.each(data, function(i, item) {
                    $('#subcat').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                });
            },
            complete: function() {}
        });
    }
</script>