PHP-jquery-ajax динамический зависимый выбор - сложность
Я программирую простую форму с динамическим зависимым выбором. Есть два файла. Один — это php-файл с html, javascript и php внутри, второй — это php-файл для получения данных для второго выбора и отправки их обратно в формате json. В первом (и основном) файле у меня есть форма с двумя полями выбора. Первое поле для провинции, второе для города. Данные находятся в базе данных MySQL, две таблицы, table_provinces для провинций (103 строки) и table_towns для городов (8000 строк). Обычно подключайтесь к базе данных, как обычно, а также ссылайтесь на jquery, используя ссылку javascript. Сначала я получаю параметры провинции для первого поля выбора, используя php для получения значений из table_provinces базы данных. Затем с помощью javascript «on('change',function(){здесь я использую ajax...})» я передаю выбранное значение с помощью ajax в файл php, который может извлекать города из table_towns и возвращать (в формате json) значения для заполнения второго поля выбора. Javascript правильно получает выбранное значение из первого поля выбора (я использовал предупреждение, чтобы узнать это), но больше ничего не происходит. Итак, это код.
Ссылка на jquery:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>Поле первого выбора HTML:
<form method = "post" action = "usemychoice.php">
<select id = "province" name = "province" color = "white">
<option value = "" selected>Select a province</option>Вот как я заполняю первое поле выбора:
<?php
$sql = "SELECT * FROM table_provinces";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo "<option value='".$row['prov']."'>".$row['extended_province']."</option>";
}
} else {
echo "Error: ..........";
}
?>И после закрытия этого поля с помощью /select у меня есть этот код, чтобы получить значения для заполнения названиями городов во втором поле выбора:
<script type = "text/javascript">
$(document).ready(function(){
$('#province').on('change',function(){
var provinceID = $(this).val();
if (provinceID){
window.alert("ok you've chosen the province "+provinceID);
$.ajax({
type:'POST',
url:'get_towns.php',
data: 'prov='+provinceID,
success:function(html){
$('#town').html(html);
}
});
}else{
$('#town').html('<option value = "">Please select the province first</option>');
}
});
});
</script>Это код get_town.php:
<?php
//*****after a require to the connection db routine"
if (!empty($_POST["prov"])) {
$sql = "SELECT * FROM table_towns WHERE prov LIKE '%" .$_POST['prov']."%'";
$result = mysqli_query($conn, $sql);
$json = [];
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
$json[$row['prov']] = $row['town'];
} else {
echo "Error: .................";
}
echo json_encode($json);
}
?>Наконец у меня есть html-код:
<select id = "town" name = "town" color = "white">
<option value = "" selected>Select province first</option>В конце концов, в коде что-то не так, потому что я не получаю никаких данных от get_town.php для заполнения второго поля выбора, и поскольку я не видел window.alert, который я поместил туда, чтобы проверьте текущее выполнение (вы не видите его в размещенном здесь коде), похоже, что оно не выполняется. Любая помощь?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
url:'get_towns.php',
Разве это не get_town.php без множественного числа?
По-видимому, кажется, что вывод get_town.php - это JSON
echo json_encode($json);
но в вашем JS он напрямую выводится в элемент html
$('#town').html(html);
Решение:
Либо измените get_town.php для отправки html, либо измените функцию успеха в JS, чтобы преобразовать полученный JSON в правильный html.
Я надеюсь, это поможет.
Обновлено:
Замените эту часть php
while($row = mysqli_fetch_assoc($result)) {
$json[$row['prov']] = $row['town'];
}
с чем-то
echo '<option value = "" selected>Select Town</option>';
while($row = mysqli_fetch_assoc($result)) {
echo '<option value = "'.$row['town'].'" color = "white">'.$row['town'].'</option>';
}
и, наконец, удалить строку
echo json_encode($json);
Спасибо, Qaisar, как бы вы предложили изменить код в обоих случаях?
Я имею в виду, как может быть код для отправки html из get_town.php или как может быть код для изменения функции успеха в javascript для преобразования полученного JSON в правильный html
Пробовал то, что вы предлагаете (добавление "</option>"), но это не решает. Второе поле выбора не возвращает ничего для заполнения.
о, я пропустил часть </option>. Во всяком случае, поделитесь выводом console.info("OUTPUT: " +html);. Поместите это выше $('#town').html(html); в JS.
<?php // ***** после требования к подпрограмме БД соединения" if (!empty($_POST["prov"])) { $sql = "SELECT * FROM table_towns WHERE prov LIKE '%" .$ _POST['prov']."%'"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { echo "< option value='".$row['town']."'></option>"; } else { echo "Ошибка:................"; } } ?>
и до сих пор нет результата
Попробуйте data: { 'prov' : provinceID }, вместо data: 'prov='+provinceID, в JS.
Неа. Любая другая идея? Дело в том, что после вызова " $.ajax({ ............ " вроде нигде в исполнении жизни нет. Все как будто ничего не было ни получено, ни сделано get_town.php
Хорошо, есть ли ошибки JS в инструменте разработчика браузера? Ваше оповещение в JS, window.alert("ok you've chosen the province "+provinceID); работает и правильно отображает provinceID?
Да, он отображает сообщение и провинцию. Значит проблема после. Нет ошибок в инструментах разработчика браузера.
Проверьте, доступен ли get_town.php, поставив die( "mmmmmmmmmmmmmm") ; перед оператором if (!empty($_POST["prov"]))(... в get_town.php и alert(html); в функции успеха. Оба файла php находятся в одном каталоге?
Пытался таким образом перехватить статус в js-скрипте, но ничего не вышло: весь предыдущий код как и раньше....... data: 'prov='+provinceID, success:function(html){ if (response != " ") { window.alert ("получил ответ"); } else { window.alert("нет ответа"); } весь остальной код как прежде...
о да, просто ошибка при вводе здесь, потому что я изменил названия городов для этого вопроса, а не для раскрытия фактической конфигурации базы данных; )