使用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原型快捷方式中存储请求实例仍然有效，但我将让您阅读详细信息。