使用AJAX将选择框填充为所选城市的社区


Populating select box with neighborhoods of the selected city using AJAX

我整个下午都在试着运行我的代码,但是我做错了什么。我将解释我需要做什么。

我需要让当用户在选择框中选择他的城市时,该城市对应的社区需要插入到另一个选择框中。为此,我使用以下逻辑:
我的数据库中有两个表,一个叫城市,另一个叫社区。表cities的结构是:

city_id (PRIMARY_KEY)
city_name

邻域的结构为:

neighborhood_id (PRIMARY_KEY)
city_id(要知道邻居属于哪个城市)
neighborhood_name

现在,在注册页面中,我有以下代码来填充user_city_id选择框:

<label>City <span style='color: red'>*</span><br/>
<select id='user_city_id' name='user_city_id'>
<option value=''>-- Select a city --</option>
<?php
    $sql = "SELECT * FROM cities ORDER BY city_id";
    foreach($connection->query($sql) as $city)
    {
        echo "<option value='{$city['city_id']}'>{$city['city_name']}</option>";
    }
?>
</select></label>

好的,这个代码部分在选择框中插入城市,其ID在值和名称中。好了。下面是邻域选择框,字体为:

<label>Neighborhood <span style='color: red'>*</span><br/>
<select id='user_neighborhood_id' name='user_neighborhood_id'>
    <option value=''>-- Select a neighborhood --</option>
</select></label>

现在是最难的部分,AJAX。我正在尝试使用jQuery和JSON解析数据与以下代码:

$(function(){
$('#user_city_id').change(function()
{
    if($(this).val())
    {
        $.getJSON('neighborhood.ajax.php?search=', {city_id: $(this).val(), ajax: 'true'}, function(j)
        {
            var options = '<option value=""></option>'; 
            for (var i = 0; i < j.length; i++)
            {
                options += '<option value="' + j[i].neighborhood_id + '">' + j[i].neighborhood_name + '</option>';
            }
        });
    }
    else
    {
        $('#user_neighborhood_id').html('<option value="">-- Select a neighborhood --</option>');
    }
});});

处理数据的文件为neighborhood.ajax.php。在这个文件中我有:

require_once("db-connect.php");
$city_id = $_GET['user_city_id'];
$neighborhoods = array();
$sql = "SELECT * FROM neighborhoods WHERE city_id = {$city_id} ORDER BY neighborhood_name";
$stmt = $connection->prepare($sql);
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
    extract($row);
    $neighborhoods[] = array
    (
        'neighborhood_id'   => $neighborhood_id,
        'neighborhood_name' => $neighborhood_name
    );
}
echo(json_encode($neighborhoods));

…但是什么都没有发生!当然是我做错了什么,但是到目前为止我自己解决不了。我努力了,但一无所获。我从未使用过AJAX。这里缺少了什么?

您需要告诉浏览器从服务器发送的数据是JSON。

的顶部添加这一行。

header('Content-Type: application/json');

今天我自己找到了解决办法。这是一个非常简单的解决方案,我昨天因为疲劳没能看到。我只是注意到,我没有发送语句,以在选择框中插入HTML, options var数据。我只是插入了$('#user_neighborhood_id').html(options).show();。以下是解决方案:

$(function(){
$('#user_city_id').change(function()
{
    if($(this).val())
    {
        $.getJSON('neighborhood.ajax.php?search=', {city_id: $(this).val(), ajax: 'true'}, function(j)
        {
            var options = '<option value=""></option>'; 
            for (var i = 0; i < j.length; i++)
            {
                options += '<option value="' + j[i].neighborhood_id + '">' + j[i].neighborhood_name + '</option>';
            }
            $('#user_neighborhood_id').html(options).show();
        });
    }
    else
    {
        $('#user_neighborhood_id').html('<option value="">-- Select a neighborhood --</option>');
    }
});});