對jquery的ajax進行二次封裝
阿新 • • 發佈:2018-12-27
程式碼如下(歡迎文明交流,留下寶貴建議,個人思路,不喜勿噴)
function ajax(opt){ var defaultSettings = { data: {}, type: 'get', dataType: 'json', headers:{'Authorization': getStore('token')}, beforeSend: function(){ openLoad('loading.gif') }, complete:function(){ closeLoad(); }, error: function(xhr){ if(xhr.status == 401){ showTips('您未登入') }else if(xhr.status == 403){ showTips('您沒有許可權') }else if(xhr.status == 500){ showTips('伺服器發生錯誤,請稍後重新整理頁面') }else{ showTips('未知錯誤') } } } for(var key in opt){ defaultSettings[key] = opt[key] if(key == 'url') defaultSettings[key] = '/api/' + opt[key] + '?format=json&time=' + new Date().getTime() } if(arguments[1]){ //如果是圖片上傳,需要傳遞第二個引數,必須內容 defaultSettings.traditional = true defaultSettings.processData = false defaultSettings.contentType = false } return $.ajax(defaultSettings) } function showTips(msg){ var tipsEl = $('<div></div>').text(msg).css({ "text-align":"center", "line-height":"40px", "height":'40px', "background":'rgba(0,0,0,0.5)', 'position':'fixed', "left":'50%', "top":'50%', "transform":'translate(-50%,-50%)', "z-index":999999, 'padding':'15px 30px', "box-sizing":'border-box', "display":'none', "font-size":'14px' }) tipsEl.appendTo($('body')).fadeIn(500).delay(1000).fadeOut(500,function(){ tipsEl.remove() }) } function getStore (name) { if (!name) return; return window.localStorage.getItem(name); } function openLoad( src ){ var loadEl_icon = $('<i></i>').css({ "width":'50px', "height":'50px', "margin":'auto', "background":'url(' + src + ') no-repeat center center', 'background-size':'cover' }) var lodeEl_inner = $('<div class="ui-loading-inner"></div>').css({ "width":'200px', "height":'200px', "margin":'auto', "border-radius":'5px', "background":'rgba(0,0,0,0.5)', "display":'flex' }).append(loadEl_icon) var loadEl_wrap = $('<div class="ui-loading-mask"></div>').css({ "position":'absolute', "left":0,"top":0,"bottom":0,"right":0, "background":'rgba(255,255,255,0.01)', "z-index":999999, "display":'flex' }).append(lodeEl_inner).appendTo($('body')) } function closeLoad(){ $('.ui-loading-mask').remove() }
在封裝裡預設進行了error函式的判斷,也提供了頁面訊息提示框,呼叫方式如下:
ajax(formData,true) //上傳圖片
ajax(opt)//普通呼叫
引數opt的設定:
var opt = {
url:'do_login',
type:'post',//如果是post需要傳遞type,如果是get可以不傳遞
data:{usrname,password},
success(r){
//your code here or callback(r)
}
}
看網上有許多大神都封裝成了面向物件的方式,這裡沒有采用的原因是,ajax在一個專案中會多次使用,面向物件封裝或許要採用單例模式,否則會增加程式開銷,但是發現網上大多數的封裝都沒有注意這個問題,另外,將loading元件和提示元件放進一個物件裡,可能增加程式碼的耦合性,單獨使用不方便。
另外,程式碼裡所有的css都應該在 .css 樣式檔案裡定義好,這樣直接建立一個元素就不用設定樣式了,這裡為了方便表達所以才寫在了js裡,用的時候可以單獨拆分出來,所以這裡的程式碼只提供一個思路,具體可以結合業務進行相應改動。