不引人注目的JavaScript ajax与mootools

是的，这很简单。看看最近发布的http://mootools.net/blog/2011/12/20/mootools-behavior/，我觉得它支持它。

我在我的模态中使用了这种方法。BootStrap(在github上查看源代码，链接在那里)以及它使用数据属性从ajax资源获取数据，它不完全相同，但它肯定是一个开始。

我只花了10分钟做这个，这是一个好的开始:

http://jsfiddle.net/dimitar/zYLtQ/

(function() {
    var ajaxify = this.ajaxify = new Class({
        Implements: [Options,Events],
        options: {
            mask: "form[data-ajax=true]",
            props: {
                ajaxLoading: "data-ajax-loading",
                ajaxMode: "data-ajax-mode",
                ajaxUpdate: "data-ajax-update",
                ajaxSuccessEvent: "data-event-success"
            }  
        },
        initialize: function(options) {
            this.setOptions(options);
            this.elements = document.getElements(this.options.mask);
            this.attachEvents();
        },
        attachEvents: function() {
            this.elements.each(function(form) {
                var props = {};
                Object.each(this.options.props, function(value, key) {
                    props[key] = form.get(value) || "";
                });
                form.store("props", props);
                form.addEvent("submit", this.handleSubmit.bind(this));
            }, this);
        },
        handleSubmit: function(e) {
            e && e.stop && e.stop();
            var form = e.target, props = form.retrieve("props"), self = this;
            var updateTarget = document.getElement(props.ajaxUpdate);
            new Request({
                url: form.get("action"),
                data: form,
                onRequest: function() {
                    if (props.ajaxLoading) {
                        var loading = document.getElement(props.ajaxLoading);
                        if (loading && updateTarget) {
                            updateTarget.set("html", loading.get("html"));
                        }
                    }
                },
                onSuccess: function() {                             
                    if (!updateTarget)
                       return;
                    if(props.ajaxMode != 'append') {
                        updateTarget.set("html", this.response.text);
                    }
                    else {
                        updateTarget.adopt(new Element("div", { html: this.response.text }));
                    }     
                    if (props.ajaxSuccessEvent)
                        self.fireEvent(props.ajaxSuccessEvent, this.response);       
                }
            }).send();
        }
    });
})();

new ajaxify({
    onContactFormSuccess: function(responseObj) {
        console.log(responseObj.text);
        alert("we are done.");
    }
});

与DOM一起工作:

<form action="/echo/html/" data-ajax="true"  data-ajax-loading="#loading" data-ajax-mode="replace" data-ajax-update="#update" data-event-success="contactFormSuccess" method="post">
    <input name="delay" value="4" type="hidden" />
    <input name="html" value="Thanks for your submission, this is the jsfiddle testing response" type="hidden" />
    <input name="name" placeholder="your name" />
    <button>submit</button>
</form>
<div id="update">The update will go here.</div>  
<div id="loading">loading...</div>        

你应该能够以此为基础。在重构时，我会将请求事件移动到它们自己的方法中，并添加更多的证明等，但这很好。我不知道MVC的全部功能，但有一件事是缺失的，那就是表单验证事件。我还添加了一个自定义事件，当完成时触发，所以你的ajax实例可以做一些特别的形式(见data-event-success="contactFormSuccess")

也可以使用默认的请求选项，如果没有隐式指定，甚至是要创建的请求对象- request, request . html, request。JSON等。像onRequest, spinners等事件也是可行的…我认为你只需要通过mvc提供的选项来工作，并构建它们来开始。

Confirm     data-ajax-confirm
HttpMethod  data-ajax-method
InsertionMode   data-ajax-mode *
LoadingElementDuration  data-ajax-loading-duration **
LoadingElementId    data-ajax-loading
OnBegin     data-ajax-begin
OnComplete  data-ajax-complete
OnFailure   data-ajax-failure
OnSuccess   data-ajax-success
UpdateTargetId  data-ajax-update
Url     data-ajax-url