Question

我很感激在这个问题上的任何帮助。

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

所以：

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＆amp; item_id =

谢谢！

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

Answer 2

如果要在单 ajax调用中执行此操作，除了重复调用$ .load（或其他）之外，还有两个选项：

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

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

2 - 将json对象发送到包含ID / Content map

的客户端

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

Answer 3

使用jQuery.load()。

这将填充目标div的DOM（事实上，任何元素）。但是如果要为它们附加特殊功能，则需要在加载完成后（在回调中）明确地执行此操作。

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

干杯！

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

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

4 个答案: