Хорошо, это моя самая первая попытка в Ajax, и это сводит меня с ума, поскольку я действительно наклоняю голову. То, что я пытаюсь сделать, – заполнить первый ящик клиентами из базы данных, а затем использовать идентификатор клиента, чтобы выбрать все идентификаторы vehicleID из базы данных, используя скрипт select.php. То, что происходит, – это выбор контейнера клиентов, но при выборе клиента ничего не происходит.
Это мой файл Test.php:
<?php include 'connectmysqli.php'; ?> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Select test</title> <script src="./js/jquery/jquery.js"></script> <script type="text/javascript" charset="utf-8"> $$('#customer') .on('change', function () { $.getJSON('select.php', { customerId: $(this) .val() }, function (data) { var options = ''; for (var x = 0; x < data.length; x++) { options += '<option value="' + data[x][ 'id'] + '">' + data[x]['reg'] + '</option>'; } $('#vehicle') .html(options); }); }); </script> </head> <body> <select id="customer"> <?php $sql = <<<SQL SELECT * FROM `customers` SQL; if(!$result = $db->query($sql)){ die('There was an error running the query [' . $db->error . ']');} while($row = $result->fetch_assoc()){ if ($row['bussinessname'] == ''){$name = $row['title'].' '.$name = $row['firstname'].' '.$name = $row['surname'];}else {$name = $row['bussinessname'];} echo '<option value="'.$row['customerID'].'">'.$name.'</option>'; } echo '</select></p>'; ?> </select> <select id="vehicle"> </select> </body> </html> Это мой файл select.php:
<?php include 'connectmysqli.php'; ?> <?php $id = $_GET['customerId']; $sql = 'SELECT * FROM vehicles WHERE customerID = ' . $id; $result = $db->query($sql); $json = array(); while ($row = $result->fetch_assoc()) { $json[] = array( 'id' => $row['vehicleID'], 'reg' => $row['reg'] // Don't you want the name? ); } echo json_encode($json); ?>
Я пытаюсь модифицировать этот учебник для работы с базами данных, но до сих пор я не увенчался успехом. http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
В консоли Chrome я получаю сообщение об ошибке:
Port error: Could not establish connection. Receiving end does not exist. miscellaneous_bindings:235 chromeHidden.Port.dispatchOnDisconnect
Событие смены вашего клиента выбирается до того, как на странице отобразится выбор. Переместите обработчик событий в document.ready:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('#customer').on('change', function (){ $.getJSON('select.php', {customerId: $(this).val()}, function(data){ var options = ''; for (var x = 0; x < data.length; x++) { options += '<option value="' + data[x]['id'] + '">' + data[x]['reg'] + '</option>'; } $('#vehicle').html(options); }); }); }); </script>
Я также изменил $$('#customer') на $('#customer') . Наконец, устраните уязвимость SQL-инъекции:
$sql = 'SELECT * FROM vehicles WHERE customerID = ' . (int)$id;
Выделение идентификатора как int предотвратит использование SQLi здесь, но вы должны рассмотреть использование подготовленного заявления .
Ошибка, о которой вы упомянули в вопросе, не связана с вашим кодом. Это похоже на расширение Chrome.
Не часть проблемы, но вот улучшенная версия вашего кода, который создает варианты автомобиля:
$.getJSON('select.php', {customerId: $(this).val()}, function(data){ var vehicle = $('#vehicle'); for (var x = 0; x < data.length; x++) { vehicle.append(new Option(data[x].reg, data[x].id)); } });
Улучшения:
new Option(...) и .append() создайте параметры и добавьте их к выбору автомобиля. Создание таких элементов лучше, чем создание необработанного HTML, так как вам не нужно беспокоиться о таких символах, как < и > в данных, что приведет к поломке вашего HTML с помощью текущего кода. data[x].id ) вместо data[x]['id'] . Похоже, вы создаете массив объектов JSON на каждой итерации в select.php.
Ниже массив генерируется в PHP, а затем кодируется JSON, что в моей опции – лучший способ генерации строк JSON.
// select.php $id = $_GET['customerId']; $sql = 'SELECT * FROM vehicles WHERE customerID = ' . $id; $result = $db->query($sql); $json = array(); while ($row = $result->fetch_assoc()) { $json[] = array( 'id' => $row['vehicleId'], 'name' => $row['vehicleId'] // Don't you want the name? ); } echo json_encode($json); // Test.php $('#customer').on('change', function (){ $.getJSON('select.php', {customerId: $(this).val()}, function(data){ var options = ''; for (var x = 0; x < data.length; x++) { options += '<option value="' + data[x]['id'] + '">' + data[x]['name'] + '</option>'; } $('#vehicle').html(options); }); });
Возможно, попробуйте live а не on . Он устарел, но я обнаружил, что с большей вероятностью будет работать, когда элемент не загружен.
$$ ('# customer'). on ('change', function () {
изменился на
$ ('# customer'). live ('change', function () {