используя jquery ajax для загрузки информации из базы данных

Question

Задача

Я пытался использовать следующее

// Start method 1

var grbData = $.ajax({
        type : "GET",
        url : "http://grb.sonoma.edu:81/getgrbs.php",
        data : "start=0&perPage=3"}).responseText;

$("#ajaxDiv").html(grbData);

// End method 1

// Start method 2

$.get("getgrbs.php", { start : 0, perPage : 3},
        function(data) {
              $("#tst").html(data);
        }, "html");

// End method 2

на этой странице: http://grb.sonoma.edu:81/paging.php для загрузки данных из базы данных. Метод 1 работает только в IE8, но только после обновления страницы. Когда страница загружается впервые, я получаю «Данные, необходимые для выполнения этой операции, еще не доступны». ошибка.

Причина, по которой я предпочитаю метод 1, заключается в том, что он дает мне доступ к отдельным строкам таблицы. Например. В каждом ряду есть класс «взрыв». Я использую

$(".burst").click(function() {
        $(".burst").css("background-color", "");
        $(this).css("background-color", "yellow");
    });

для изменения цвета выбранной строки при нажатии. Похоже, это работает только с методом 1, а не с методом 2.

Весь приведенный выше код инкапсулирован в $ (document) .ready (). Я пытался

$("#ajaxDiv").load("getgrbs.php", { start : 0, perPage : 3});

но я получаю результаты, аналогичные методу 2.

Как я могу заставить функцию щелчка работать со способом 2 или заставить метод 1 работать во всех браузерах без обновления? Спасибо за любую помощь, которую я могу получить для этого.

Мне нужно сделать это в ajax (пробовал ajax без jquery и там тоже не повезло), так как на странице будут другие вещи, которые не изменятся, когда пользователь просматривает данные.

Приложение к решению (лучшее решение в ответе)

После успешного использования «success» я заметил, что возможность щелкнуть строку и получить изменение цвета bg исчезла. Итак, я сделал следующее, что, кажется, работает. Не уверен, что это лучший способ.

var grbData = $.ajax({
    type : "GET",
    url : "http://grb.sonoma.edu:81/getgrbs.php",
    data : "start=0&perPage=3",
    dataType : 'html',
    success: function (data) {
            $("#ajaxDiv").replaceWith(data);
            startInteraction();
        }
});

function startInteraction() {
    $(".burst").click(function() {
        $(".burst").css("background-color", "");
        $(this).css("background-color", "yellow");
    });
}

Answer 1

Попробуйте:

var grbData = $.ajax({
        type : "GET",
        url : "http://grb.sonoma.edu:81/getgrbs.php",
        data : "start=0&perPage=3",
        success: function (html) {
            $("#ajaxDiv").html(html);
        }
});

Причина, по которой он не работает, заключается в том, что он пытается использовать ваш html до завершения загрузки. Код выполняется быстрее, чем возвращается результат.

Чтобы сохранить событие click, вы можете использовать .live, чтобы оно вызывало событие для будущих элементов, добавленных на страницу, таких как код ajax.

$(document).ready( function () {
    $(".burst").live('click',function() {
        $(".burst").css("background-color", "");
        $(this).css("background-color", "yellow");
    });
});

Answer 2

Если вы хотите использовать первый, вы должны передать async:false.

var grbData = $.ajax({
    type : "GET",
    url : "http://grb.sonoma.edu:81/getgrbs.php",
    async: false,
    data : "start=0&perPage=3"}).responseText;

Вызов $.ajax является асинхронным, поэтому вызов $ .ajax выдаст вам сообщение о том, что данные не готовы. Это, конечно, отчасти противоречит цели AJAX, поскольку взаимодействие с пользователем заблокировано.

Лучший способ может быть:

var grbData = $.ajax({
    type : "GET",
    url : "http://grb.sonoma.edu:81/getgrbs.php",
    dataType: 'html',  // assuming your service returns HTML
    success: function(data) {
      $("#ajaxDiv").html(data);
    }
 });

Answer 3

Скорее всего, у вас возникли проблемы, поскольку вы пытаетесь получить доступ к элементам страницы до того, как браузер полностью принял (или проанализировал) HTML-код. Убедитесь, что вы подождали, пока страница не загрузится, прежде чем пытаться изменить страницу. Первый вызов вашего ajax-метода, вероятно, должен произойти в событии onload или быть инициирован событием onload, чтобы произойти позднее.