使用Mootools的Ajax請求不起作用

Question

我嘗試通過本教程將內容加載到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面板的例子。

Answer 1

這里缺少一個：

alert('Response received.);

Answer 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

Answer 3

您不會按照建議的那樣停止click事件。

代替：

event.stop();

做：

new Event(event).stop();