Question

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

当用户在选择框中选择他的城市时，我需要做出与该城市相对应的邻居需要插入另一个选择框。为此，我使用以下逻辑：
我的数据库中有两个表，一个叫做 cities ，另一个叫做邻居。表 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。这里缺少什么？

Answer 1

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

在 neighborhood.ajax.php

的顶部添加此行

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

Answer 2

我自己今天找到了解决方案。这是一个非常简单的解决方案，由于疲劳我昨天看不到。我只是注意到我没有发送语句在选择框中插入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>');
    }
});});

使用AJAX使用所选城市的邻域填充选择框

2 个答案: