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

在这个问题上，我将不胜感激

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

因此：

对象1
对象2
对象3

我如何使用jQuery通过AJAX调用使用“控件”类来流行div？在这种情况下，我想它必须对每个DIV执行3个ajax调用

我抓取内容的ajax是ajax.php？request=controls&item\u id=

---

谢谢

实现这一点的基本方法如下：

$(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\u id

属性，您可以从元素的id中提取所需的id，也许可以使用正则表达式，如下所示。。。（警告，未测试）

使用

这将填充目标div的DOM（实际上是任何元素）。但是，如果要将特殊函数附加到它们，则需要在加载完成后（在回调中）显式执行此操作

简单事件处理程序可以设置为使用（与usig相反）自动绑定到新获取的内容

---

干杯

这将找到所有匹配的class=“controls”div，提取项目id，然后跳到服务器获取HTML

有关ajax加载的更多信息，请参见：

---

如果您想在单个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");
});

---

哇！这与我提出的jquery几乎完全相同。该死的，应该快一点！：）最后一点要注意的是，我会小心使用您在div中添加的自定义

item\u id

属性。也许您可以使用标准的

id

属性，从完整值中提取id号。（因此不需要使用这个。）@Funka。您能详细说明一下使用标准ID属性的含义吗？这将如何改变您的示例代码？例如，您的div中有id=“controls1”――因此，您可以使用regexp提取“1”。查看我的更新。@Funka。好的，我明白了。但使用正则表达式似乎需要更多的工作。它不是比仅仅使用attr更快吗？是的，它将超过3个。但我以3为例。更喜欢只执行页面中所有类别控件的解决方案。感谢您的帮助！你可以看到它在我的测试版网站上运行。。。而且它实际上还没有完全开发出来。工作正在进行中。谢谢！好主意！我正在使用缓存，所以我想使用缓存加载所有主要元素。javascript是为了获取可能更频繁更改的数据。顺便问一下，这是来自圣何塞的卡里姆吗？

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

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

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