使用jqueryajax从数据库加载信息 问题

我试着使用下面的

// 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

在此页面上：从数据库加载数据。方法1仅在IE8中有效，但仅在页面刷新后有效。当第一次加载页面时，我得到一个“完成此操作所需的数据尚不可用”错误

我之所以喜欢方法1，是因为它允许我访问表中的各个行。例如，每行有一个类，“burst”。我正在使用

$(".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，但也没有运气），因为页面上的其他内容不会随着用户浏览数据而改变

解决方案附录（答案中的更好解决方案） 成功使用“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");
    });
}

---

您很可能遇到问题，因为您试图在浏览器完全接收（或解析）HTML之前访问页面的元素。在尝试修改页面之前，请确保已等待页面完成加载。对ajax方法的第一次调用可能发生在onload事件中，或者由onload事件触发，以后再发生。

如果要使用第一次调用，应该传入一个

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);
    }
 });

尝试：

它不起作用的原因是它试图在加载完成之前使用html。代码的执行速度比返回的结果快

要保留单击事件，可以使用.live，以便它为将来添加到页面中的元素触发事件，如ajax代码

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

---

嗨，谢谢。这解决了我的Firefox和Opera问题。但是，使用“success”填充div会使更改单击行的背景颜色的功能失效。我的意思是，我做了一些有效的操作，不确定这是否是最佳解决方案。您遇到问题的唯一时间是，如果您多次调用ajax方法-如果您这样做，您可能会向相同的元素添加多个单击事件。

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