阮一峰關於deferred 詳解
阿新 • • 發佈:2019-02-11
關於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){}) };