我整个下午都在试着运行我的代码,但是我做错了什么。我将解释我需要做什么。
我需要让当用户在选择框中选择他的城市时,该城市对应的社区需要插入到另一个选择框中。为此,我使用以下逻辑:
我的数据库中有两个表,一个叫城市,另一个叫社区。表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>');
}
});});