Question

我想在单击按钮后进行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调用。所以，就目前而言，当我尝试加载我的页面时，在后台所有这些内容都是自动加载的，我不喜欢它。

我想要点击每个单独的标签来加载内容。通过这种方式，我保持网站的速度。

对此有何帮助？

Answer 1

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

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

Answer 2

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

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

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

在使用MooTools单击我的按钮后进行Ajax调用

2 个答案: