我想在单击按钮后进行ajax调用。我有超过 14 个按钮，这些按钮使 ajax 请求从我网站的其他部分捕获元素。
Button, Button1, Button2, Button3
| |
| load content |
| |
|_______________|
为此，我在MooTools中使用了以下命令：
window.addEvent('load', function(){
new Request.HTML({
'url': '<?php echo $this->baseUrl() ?>/pageitems/1/news/?format=smoothbox',
'onComplete': function(answer) {
answer[1].getElements('.CatchClassId')[0].inject($('spendPointsContPages1').empty(),
'bottom');
}
}).send();
});
并加载 DIV
<div id="spendPointsContPages1"><img src="<?php echo $this->baseUrl() ?>/application/modules/Socialengineaddon/externals/images/loading.gif"/></div>
这是在进行 ajax 调用。我喜欢单击我的一些选项卡，然后进行 ajax 调用。所以，现在，当我尝试加载我的页面时，在后台所有这些内容都会自动加载，我不喜欢它。
我希望单击每个单独的选项卡以加载内容。通过这种方式，我保持了网站的速度。
对此有任何帮助吗？
您应该为每个单独的按钮添加事件，而不是在开始时加载所有内容（这并不比服务器端加载快）。
.HTML
<div id="menuBar">
<button class="menuItem" data-page="home">Home</button>
<button class="menuItem" data-page="about">About Me</button>
</div>
爪哇语
document.id('menubar').addEvent('click:relay(button.menuItem)', function() {
var requestedPage = this.getProperty('data-page');
loadPage(requestedPage); // Where loadPage is defined somewhere else
});
你可以做几件事来改进这里的东西：
- 如果内容足够稳定（不会动态更改），则使用
localStorage或简单的闭包（如果不支持）在基于选项卡 ID 的键中缓存选项卡上的响应。 - 添加悬停意图 - 基本上，在鼠标悬停时启动 AJAX 请求并将响应存储在存储中，然后如果用户实际单击，只需显示来自缓存的就绪响应。
如果您在编写可以执行缓存和扩展请求类的类方面需要帮助，那么我可以向您指出我在这方面所做的一些工作。