使用 mootools 实现不显眼的 JavaScript ajax？

Question

MVC3 中提供了带有 jQ​​uery 的不显眼的 JavaScript。但是如何将不显眼的 Javascript ajax 与 mootools 一起使用呢？

Answer 1

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

我也在我的 Modal.BootStrap 中使用了这种方法（在 github 上查看源代码，链接在那里）它使用数据属性从 ajax 资源获取数据，虽然不太一样，但它确实是一个开始。

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

http://jsfiddle.net/dimitar/zYLtQ/< /a>

(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 的所有功能，但缺少一件事是表单验证事件。我还添加了一个自定义事件，完成后会触发，以便您的 ajaxifier 实例可以执行该表单特有的操作（请参阅 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