使用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。

我如何才能使click函数与方法2一起使用，或者使方法1在所有浏览器上都能正常工作而不进行刷新？感谢您提供的任何帮助。

我需要在ajax中进行此操作（尝试过没有jquery且没有运气的ajax），因为页面上还有其他内容不会随着用户翻阅数据而改变。

解决方案的附录（更好的解决方案）

成功使用“成功”之后，我注意到单击行并进行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");
    });
});