Возврат результатов из базы данных MySQL с использованием jQuery / AJAX и вставка в DIV

Question

Я работаю над проектом по резервированию классных комнат. Один из способов зарезервировать комнату - это выбрать комнату, посмотреть, достаточно ли у нее вещей (количество мест, количество компьютеров и т. Д.), Для чего человеку это нужно, и затем сделать заказ.

У меня есть страница, которая отображает все доступные комнаты в виде ссылок в таблице HTML, динамически создаваемой в PHP / MySQL. Моя цель - когда пользователь нажимает на название комнаты, запрос AJAX выполняет запрос и возвращает необходимые данные, а затем отображает их в DIV на той же странице.

Прямо сейчас я вызываю внешний PHP-файл, который получает идентификатор комнаты, по которой щелкнули, и выполняет запрос. Я все еще новичок в jQuery, и я почти уверен, что проблема в моем скрипте jQuery:

<script type="text/javascript">
$(document).ready(function()
{
$('table.roomNums td a.rm-details').click(function()
{
    var id = $(this).attr('id');

    $.ajax(
    {
        type: 'POST',
        url: 'roomInfo.php',
        data: {
            roomID: id
        },
        dataType: 'json',
        cache: false,

        success: function(result)
        {
            $('#room-details').empty();
            $('#room-details').append("<ul>\n\t<li>Seats: " + result.numOfSeats + "</li>\n</ul>");
        }
    });
});
});
</script>

На данный момент, когда я нажимаю на одну из ссылок номера комнаты, ничего не происходит. Я предполагаю, что моя проблема заключается в этом сценарии, но я не уверен, где или что. Я читал функцию ajax в jQuery, и я почти уверен, что понимаю, что происходит, но сейчас мне не везет.

Answer 1

Вы хотите устранить следующие четыре вещи:

1. HTTP-запрос Браузер даже выдает запрос ajax? Если да, содержит ли он параметр формы, который вы пытаетесь сделать так, чтобы он содержал?
2. HTTP-ответ Возвращает ли ваш php-скрипт ожидаемые вами данные в формате JSON, чтобы JQuery мог автоматически его проанализировать? Скопируйте и вставьте ответ сервера в тестовый файл javascript и посмотрите, компилируется ли он как допустимый объект JSON в отладчике javascript.
3. Функция успеха AJAX Ошибка в вашем JavaScript? Можете ли вы пройти через каждую строку выполнения в отладчике javascript, таком как firebug?
4. Обработчик событий клика Ваш обработчик кликов правильно возвращает false, чтобы страница не перезагружалась? Срабатывает ли ваша функция обработчика событий щелчка при щелчке?

Где-то в вышеприведенных четырех вещах кроется ваша проблема. Мне кажется, что вам просто нужно вернуть false в обработчике кликов, чтобы страница не перезагружалась.