使用jquery ajax从数据库加载信息

时间:2009-08-21 19:28:27

标签: jquery ajax load

问题

我尝试使用以下

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

3 个答案:

答案 0 :(得分:2)

尝试:

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。代码的执行速度比返回结果的速度快。

要保留点击事件,您可以使用.live,以便为将来添加到页面的元素触发事件,就像您的ajax代码一样。

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

答案 1 :(得分:1)

如果你想使用第一个,你应该传递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);
    }
 });

答案 2 :(得分:0)

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