使用ajax自定义下拉列表答案

【问题标题】：Customizing drop down list with ajax使用ajax自定义下拉列表
【发布时间】：2016-12-18 11:32:57
【问题描述】：

我正在尝试通过 ajax 从我的数据库中提取数据到 drop_down_list1。并将其显示到下一个drop_down_list2。我遵循与youtube tutorial 中几乎完全相同的内容，但它似乎不起作用。

代码如下：

test.php

<?php 
include("connection.php");
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/JavaScript">
function State(){
    $('#stateddl').empty();
    $('#stateddl').append("<option>Loading...</option>");
    $('#districtddl').append("<option value='0'> - </option>");

    $.ajax({
        type:"POST",
        url:"custom2.php",
        contentType:"application/json; charset=utf-8",
        dataType:"json",
        success: function(data){
            $('#stateddl').empty();
            $('#stateddl').append("<option value='0'>-</option>");
            $.each(data,function(i,item){
                $('#stateddl').append('<option value="'+ data[i].roomName +'">'+ data[i].roomName+'</option>'); 
            });
        },
        complete: function(){
        }
    });
}
function District(sid){
    $('#districtddl').empty();
    $('#districtddl').append("<option>Loading...</option>");
    $.ajax({
        type:"POST",
        url:"custom.php?sid="+sid,
        contentType:"application/json; charset=utf-8",
        dataType="json",
        success: function(data){
            $('#districtddl').empty();
            $('#districtddl').append("<option value='0'> - </option>");
            $.each(data,function(i,item){
                $('#districtddl').append('<option value="'+ data[i].roomPrice +'">'+ data[i].roomPrice +'</option>');
            });
        },
        complete: function(){
        }
    });
}
$(document).ready(function(){
    State();
    $("#stateddl").change(function(){
        var roomName = $("#stateddl").val();
        District(roomName);

    });
});

</script>
</head>

<body>
<select name="stateddl" id="stateddl"></select> <select name="districtddl" id="districtddl"></select>
</body>
</html>

custom2.php

<?php
include("connection.php");

$sql=mysql_query("SELECT * FROM roomtype");
if(mysql_num_rows($sql))
{
    $data=array();
    while($row=mysql_fetch_array($sql))
    {
        $data[] = array
        (
        'roomName' => $row['roomName']
        );
}
header('Content-type: application/json');
echo json_encode($data);
}
?>

custom.php

<?php
include("connection.php");

$sql=mysql_query("SELECT * FROM roomtype WHERE roomName='".$_GET["sid"]."'");
if(mysql_num_rows($sql))
{
$data=array();
while($row=mysql_fetch_array($sql))
{
    $data[] = array
    (
        'sid' => $row['roomName'],
        'roomPrice' => $row['roomPrice']
    );
}
header('Content-type: application/json');
echo json_encode($data);
}
?>

【问题讨论】：

你能指定“但它似乎不起作用”吗？现在会发生什么？错误？
下拉列表中不显示任何结果。既不是等默认值。

标签： php jquery ajax

【解决方案1】：

问题是因为下面的功能块，

function District(sid){
    ...
    $.ajax({
        ...
        dataType="json",
        ...
    });
}

查看AJAX请求的dataType设置，错误=符号。应该是dataType:"json"

【讨论】：

我从不习惯 Jquery 和 AJAX。所以我不知道它是如何工作的。谢谢。