使用Mootools的新聞稿注冊表，沒有頁面重新加載

Question

我一直在尋找一個好的mootools腳本，用於簡單的簡報注冊表單，帶有一行輸入字段+發送按鈕。

我正在考慮的一些事情：

• 表格提交，無需重新加載
• 我不想使用jQuery或Protoype或Mootools之外的任何其他庫（我已經有Mootools用於網站的其他部分，並且添加更多的庫會產生太多的混亂，我認為？）
• 試圖找到一個具有漂亮但簡單效果的效果（比如在發送時旋轉“加載”圖像...但到目前為止只發現了這個用於jQuery / Prototype）
• 我正在使用干凈的URL：.htaccess將URI發送到index.php，然后它解析URL並找出要創建每個頁面的php文件。 換句話說，我不確定是否有辦法在不弄亂URL的情況下對mysql進行驗證/插入條目？

非常感謝任何幫助，謝謝！

Answer 1

您可以使用此處的Ajax.Form方法 - 這是一種用於存儲數據的ajax post / post-back方法。

這是代碼上的瘦：

$('myForm').addEvent('submit', function(e) {
    /**
     * Prevent the submit event
     */
    new Event(e).stop();

    /**
     * This empties the log and shows the spinning indicator
     */
    var log = $('log_res').empty().addClass('ajax-loading');

    /**
     * send takes care of encoding and returns the Ajax instance.
     * onComplete removes the spinner from the log.
     */
    this.send({
        update: log,
        onComplete: function() {
            log.removeClass('ajax-loading');
        }
    });
});

與此參考代碼一起使用的HTML / CSS：

<h3>Send a Form with Ajax</h3>
<p><a href="demos/Ajax.Form/ajax.form.phps">See ajax.form.phps</a></p>

<form id="myForm" action="demos/Ajax.Form/ajax.form.php" method="get">
    <div id="form_box">
        <div>
            <p>First Name:</p>
            <input type="text" name="first_name" value="John" />
        </div>
        <div>
            <p>Last Name:</p>
            <input type="text" name="last_name" value="Q" />
        </div>
        <div>
            <p>E-Mail:</p>
            <input type="text" name="e_mail" value="john.q@mootools.net" />
        </div>
        <div>
            <p>MooTooler:</p>
             <input type="checkbox" name="mootooler" value="yes" checked="checked" />
        </div>
        <div>
            <p>New to Mootools:</p>
            <select name="new">
              <option value="yes" selected="selected">yes</option>
              <option value="no">no</option>
            </select>
        </div>
        <div class="hr"><!-- spanner --></div>
        <input type="submit" name="button" id="submitter" />
    <span class="clr"><!-- spanner --></span>
    </div>
</form>
<div id="log">
    <h3>Ajax Response</h3>
    <div id="log_res"><!-- spanner --></div>
</div>
<span class="clr"><!-- spanner --></span>

其他參考CSS：

#form_box {
    float: left;
    width: 290px;
    background: #f8f8f8;
    border: 1px solid #d6d6d6;
    border-left-color: #e4e4e4;
    border-top-color: #e4e4e4;
    font-size: 11px;
    font-weight: bold;
    padding: 0.5em;
    margin-top: 10px;
    margin-bottom: 2px;
}

#form_box div {
    height: 25px;
    padding: 0.2em 0.5em;
}

#form_box div.hr {
    border-bottom: 2px solid #e2e2e1;
    height: 0px;
    margin-top: 0pt;
    margin-bottom: 7px;
}

#form_box p {
    float: left;
    margin: 4px 0pt;
    width: 120px;
}


#log {
    float: left;
    padding: 0.5em;
    margin-left: 10px;
    width: 290px;
    border: 1px solid #d6d6d6;
    border-left-color: #e4e4e4;
    border-top-color: #e4e4e4;
    margin-top: 10px;
}

#log_res {
    overflow: auto;
}

#log_res.ajax-loading {
    padding: 20px 0;
    background: url(http://demos111.mootools.net/demos/Group/spinner.gif) no-repeat center;
}

希望這可以幫助。

Answer 2

修復北方創意示例，使其適用於1.2+：

http://jsfiddle.net/dimitar/gEdqa/

截取表單提交的代碼非常簡單：

document.id("myForm").addEvent("submit", function(e) {
    e.stop();

    new Request({
        url: this.get("action"),
        method: "post",
        data: this,
        onRequest: function() {
            document.id("result").set("html", "sending...");
            // or do whatever spinner you want.
        },
        // update: $("results"),
        // evalScripts: true, // etc etc options to request class
        onComplete: function() {
            document.id("result").set("html", this.response.text);
        }
    }).send();
});

此外，在element.send原型快捷方式中存儲請求實例仍然有效，但我將讓您閱讀詳細信息。