使用mootools的不顯眼的JavaScript ajax？

Question

MVC3中提供了帶有jQuery的不顯眼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/

(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.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