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

【问题标题】：using jquery ajax to load info from database使用 jquery ajax 从数据库加载信息
【发布时间】：2009-08-21 19:28:26
【问题描述】：

问题

我尝试使用以下

// 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”。我正在使用

$(".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 中执行此操作（尝试了没有 jquery 的 ajax，也没有运气），因为页面上的其他内容不会随着用户浏览数据而改变。

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

成功使用“成功”后，我注意到单击行并更改背景颜色的功能消失了。所以我做了以下，这似乎工作。不确定它是否是最好的方法。

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

【问题讨论】：

标签： jquery ajax load

【解决方案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。代码执行速度比返回结果快。

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

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

【讨论】：

嗨，谢谢。这解决了我的 Firefox 和 Opera 问题。但是，使用“成功”填充 div 会导致无法更改单击行的背景颜色。
我的意思是补充一下，我做了一些有效的方法，不确定它是否是最好的解决方案。
您唯一会遇到问题的情况是，如果您多次调用 ajax 方法 - 如果您这样做，您可能会向同一元素添加多个点击事件。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：