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

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