使用MooTools点击我的按钮后发起Ajax调用

我想在单击按钮后进行ajax调用。我有更多的14个按钮，使得Ajax请求从我的网站的其他部分捕获元素。使用MooTools点击我的按钮后发起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 id="spendPointsContPages1"><img src="<?php echo $this->baseUrl() ?>/application/modules/Socialengineaddon/externals/images/loading.gif"/></div>

这是使Ajax调用加载DIV。我喜欢当我的一些标签被点击，然后进行ajax调用。所以，现在，当我尝试加载我的页面，在后台，所有这些内容都自动加载，我不喜欢它。

我希望每个单独的选项卡被点击加载内容。这样我就可以保持网站的速度。

对此有何帮助？

来源

2012-05-09 Seik

您应该将事件添加到每个单独的按钮，而不是在开始时加载所有内容（这不会比服务器端加载更快）。

HTML

<div id="menuBar"> 
    <button class="menuItem" data-page="home">Home</button> 
    <button class="menuItem" data-page="about">About Me</button> 
</div>

的Javascript

document.id('menubar').addEvent('click:relay(button.menuItem)', function() { 
    var requestedPage = this.getProperty('data-page'); 
    loadPage(requestedPage); // Where loadPage is defined somewhere else 
});

来源

2012-05-10 04:32:34

你可以做几件事情，以改善这里的东西：

使用localStorage或一个简单的关闭 - 如果不支持 - 如果内容足够稳定（不会动态更改），则将标签上的响应缓存在基于标签ID的键中。
添加悬停意图 - 基本上，在mouseover上启动ajax请求并将响应存储在存储中，然后如果用户实际单击，则只显示缓存中的就绪响应。

如果您需要编写一个可以执行缓存并扩展您的请求类的类的帮助，那么我可以指出您在这方面所做的一些工作。

来源

2012-05-10 08:28:30

悬停意图。好天神Dimitar，那是天才。 –

使用MooTools点击我的按钮后发起Ajax调用

回答

相关问题