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

可以说我想为页面上不同的项目加载控件后，它已完成加载。

所以：

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流行的DIV带班“控制”使用AJAX调用？在这种情况下，我想它将不得不对每个DIV流行3次ajax调用。

我的AJAX抢内容是ajax.php？请求=控制& ITEM_ID =

谢谢！

来源

2009-09-14 Scott Yu - Front-End UX

是，这将是大于3但我使用3作为一个例子。喜欢只做页面内所有类别控件的解决方案。 – 2009-09-14 01:41:43

感谢您的帮助！你可以看到它在我的BETA网站上工作...... http://www.photoidentify.com并没有真正完全开发。工作正在进行中。 – 2009-09-15 06:26:54

一个基本的方式做到这一点如下：

$(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); 
    }); 
});

来源

2009-09-14 01:32:24 Funka

哇..这几乎_exactly_相同的jquery我想出了。该死的应该更快！ :) – russau 2009-09-14 01:38:39

最后一个音符，我会小心使用你放在div上的自定义'item_id'属性。也许你可以使用标准的'id'属性，并从完整的值中提取id号。（因此不需要使用这个。） – Funka 2009-09-14 01:38:39

嘿，工作！ – 2009-09-14 01:39:29

使用jQuery.load()。

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

简单的事件处理程序可以使用jQuery.live()（而不是USIG jQuery.bind()）

干杯自动投注一组约束自己，以获取新内容！

来源

2009-09-14 01:35:20 jrharshath

这将找到所有匹配的class =“controls”divs，提取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) 
     }); 
    });

来源

2009-09-14 01:37:00 russau

我喜欢这段代码的外观！ ;-) – Funka 2009-09-14 01:40:47

除了使重复调用$。负载（或其他），如果你想要做的是，在一个单 Ajax调用，这里有两种选择：

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

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

2 - 发送JSON对象给客户端包含ID /内容地图

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

来源

2009-09-14 01:39:02 karim79

谢谢！好想法！我正在使用缓存，所以我想使用缓存加载所有主要元素。而JavaScript是为了抓住可能更经常变化的数据。顺便说一下，这是从圣何塞卡里姆？ – 2009-09-14 06:52:54

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

回答

相关问题