1. 程式人生 > >阮一峰關於deferred 詳解

阮一峰關於deferred 詳解

關於jquery中ajax請求的深入瞭解,deferred可能是jquery中1.5版本以後最重要的方法,你真的理解了嗎!

http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

自己試著封裝的ajax

直接上馬:

html:

 <button id="btn" onclick="ajaxBtn(this)"></button>
js程式碼:
/*
    * @obj 事件物件
    * @url必填
    * @data,type,async beforeSend有預設值
    * @beforeSend ajax傳送之前的狀態事件;
    * @ajax 形成promise物件 
    * @then 成功與失敗的函式
    * */
    jQuery.extend({
        ajaxCode:function (url,data,type,async) {
            var dtd = $.Deferred();
           $.ajax({
                url:url,
                data:data || {},
                type: type || 'GET',
                cache: 'false',
               dataType:dataType || 'json',
                async:async || 'true',
                success: dtd.resolve,
                error: dtd.reject,
            });
            return dtd.promise();
        },
        ajaxCode2:function (url,data,type,async) {
            var dtd = $.Deferred();
           $.ajax({
                url:url,
                data:data || {},
                type: type || 'GET',
                cache: 'false',
               dataType:dataType || 'json',
                async:async || 'true'
            }).then(function(data){
                 dtd.resolve(data);
            }, function(){
                 toastr.error("提交失敗", "操作失敗");
                 dtd.reject();
            });


            return dtd.promise();
        },
    });





    function ajaxBtn (obj) {
        var  obj =  arguments[0] ;
        $.ajaxCode(obj,url,data,type,async,beforeSend).then(function(data){},function(data){})
    };