使用 jQuery 在页面加载后使用 AJAX 填充页面答案

【问题标题】：Use AJAX to populate page after page loads using jQuery使用 jQuery 在页面加载后使用 AJAX 填充页面
【发布时间】：2010-11-28 00:08:09
【问题描述】：

我将不胜感激有关此问题的任何帮助。

假设我想在页面加载完成后为页面上的不同项目加载控件。

所以：

Object 1
<div id="controls1" class="controls" item_id="1"></div>

Object 2
<div id="controls2" class="controls" item_id="2"></div>

Object 3
<div id="controls3" class="controls" item_id="3"></div>

如何使用 jQuery 使用 AJAX 调用来流行具有“控件”类的 DIV？在这种情况下，我猜它必须对每个 DIV 进行 3 次 ajax 调用。

我的 ajax 抓取内容是 ajax.php?request=controls&item_id=

谢谢！

【问题讨论】：

是的，会超过 3。但我以 3 为例。更喜欢只在页面内执行所有控件类的解决方案。
感谢您的帮助！您可以在我的 BETA 网站上看到它...photoidentify.com 它实际上并没有完全开发。正在进行中。

标签： jquery ajax

【解决方案1】：

执行此操作的基本方法如下：

$(document).ready(function() {
    $('#controls1').load('ajax.php?request=controls&item_id=1');
    $('#controls2').load('ajax.php?request=controls&item_id=2');
    $('#controls3').load('ajax.php?request=controls&item_id=3');
});

更好的方法是动态确定您拥有多少个“控件”div，并根据需要加载它们...例如：

$(document).ready(function() {
    $('.controls').each(function() {
        var theId = $(this).attr('item_id');
        $(this).load('ajax.php?request=controls&item_id=' + theId);
    });
});

祝你好运！

更新：

为避免使用自定义 item_id 属性，您可以使用正则表达式从元素的 ID 中提取所需的 ID，就像这样...（警告，未测试）

$(document).ready(function() {
    $('.controls').each(function() {
        var theId = $(this).attr('id');
        theId = /controls(\d+)/.exec(theId)[1];
        $(this).load('ajax.php?request=controls&item_id=' + theId);
    });
});

【讨论】：

哇.. 这几乎是完全我想出的同一个 jquery。该死的应该更快！ :)
最后一点，我会小心使用您放在 div 上的自定义 item_id 属性。可能您可以只使用标准的id 属性，并从完整值中提取id 号。（因此不需要使用它。）
@Funka。您能否详细说明使用标准 ID 属性的含义？这将如何改变您的示例代码？
例如，您的 div 中有 id="controls1" --- 因此，您可以使用正则表达式来提取“1”。查看我的更新。
@Funka。好吧，我明白了。但使用正则表达式似乎需要更多工作。是不是比只使用 attr 更快？？

【解决方案2】：

如果您想在 single ajax 调用中重复调用 $.load（或其他），除了重复调用之外，还有两个选项：

1 - 将所有这些 div 包装在另一个中一，让服务器提供单个请求中的全部内容：

$(document).ready(function() {
    $('#superDiv').load('foo.html');
});

2 - 向客户端发送一个包含 ID/内容映射的 json 对象

$(document).ready(function() {
    $.get('foo.php', function(json) {
        $('#controls1').html(json.controls1);
        $('#controls2').html(json.controls2);
        $('#controls3').html(json.controls3);
    },"json");
});

【讨论】：

谢谢！好点子！我正在使用缓存，所以我想使用缓存加载所有主要元素。 javascript 是为了抓取可能更频繁更改的数据。顺便说一句，这是来自圣何塞的卡里姆吗？

【解决方案3】：

使用jQuery.load()。

这将填充目标 div 的 DOM（事实上，任何元素）。但是如果你想给它们附加特殊的功能，你需要在加载完成后（在回调中）显式地这样做。

简单的事件处理程序可以设置为使用jQuery.live()（而不是使用jQuery.bind()）自动将自己绑定到新获取的内容

干杯！

【讨论】：

【解决方案4】：

这将找到所有匹配的 class="controls" div，提取 item_id，然后前往服务器获取 HTML。

更多关于 ajax 加载的信息：http://docs.jquery.com/Ajax/load#urldatacallback

    $(document).ready(function() {
        $('.controls').each(function(i) {
            var itemId = $(this).attr('item_id');
            $(this).load('ajax.php?request=controls&item_id=' + itemId)
        });
    });

【讨论】：