0

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

单击以加载内容时，我希望每个单独的选项卡。通过这种方式，我保持网站的速度。

对此有什么帮助吗？

4

2 回答 2

1

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

  1. localStorage如果内容足够稳定（不动态更改），则使用或简单的闭包（如果不支持）来缓存基于选项卡 ID 的键中的选项卡上的响应。
  2. 添加悬停意图 - 基本上，在鼠标悬停时启动 ajax 请求并将响应存储在存储中，然后如果用户实际单击，则仅显示来自缓存的就绪响应。

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

于 2012-05-10T08:28:30.570 回答
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
});
于 2012-05-10T04:32:34.603 回答