使用 mootools 的 Ajax 请求不起作用答案

【问题标题】：Ajax request using mootools not working使用 mootools 的 Ajax 请求不起作用
【发布时间】：2011-02-26 14:43:40
【问题描述】：

我尝试使用this 教程将内容加载到 div 中。不幸的是，这只是将 HTML 文件作为新页面加载。

这是应该完成这项工作的 javascript

window.addEvent('domready', function() {

     $('runAjax').addEvent('click', function(event) {
         event.stop();
         var req = new Request({
             method: 'get',
             url: $('runAjax').get('href'),
             data: { 'do' : '1' },
             onRequest: function() { alert('The request has been made, please wait until it has finished.'); },
              onComplete: function(response) { alert('Response received.); $('container').set('html', response); }
         }).send();
$('runAjax').removeEvent('click');
     });
});

这是应该启动该功能的链接

<a href="about.html" id="runAjax" class="panel">Profil</a>

这是 index.html 的 div 结构。我希望将内容加载到“容器”-div

<div id="view">
    <div id="sidebar">
        mib
    </div>

    <div id="container">
        <div id="logo">
            <!--img src="img/logo.png"-->
        </div>

        <div align="center" id="tagline">   
            content
        </div>
    </div>
</div>

我真的不在乎我使用什么脚本，只要它与 MooTools 1.2 兼容，因为我需要它用于滑动顶部面板，例如，将其更改为 jquery 面板需要做更多的工作。

【问题讨论】：

标签： javascript ajax mootools

【解决方案1】：

这里少了一个'：

alert('Response received.);

【讨论】：

这就是copypasta如何让你付出生命的代价

【解决方案2】：

你让事情变得比你需要的更复杂。试试这个：

window.addEvent('domready', function(){
    function loadPage(url) {
        $('container').load(url);
    }

    $('runAjax').addEvent('click', function(e) {
        e.stop();
        loadPage(this.get('href'));
        this.removeEvent('click', loadPage);
    });
});

如果这不起作用，请启动 Firebug 并查看记录了哪些 Javascript 错误。这是 Element.load() 快捷方式的参考：

http://mootools.net/docs/core/Request/Request.HTML#Element:load

【讨论】：

【解决方案3】：

您没有按照建议停止点击事件。

代替：

event.stop();

做：

new Event(event).stop();

【讨论】：