jQuery 實現簡單的Ajax請求封裝

2022-06-10 14:15:15 字數 1655 閱讀 1133

封裝的意義在於復用,在於減少重複的**。

我在專案中做了簡單的ajax請求封裝,實現方式如下:

1

//封裝ajax請求

2$.extend(

7$.ajax(,

15 success: function

(data),

18 error: function

(data),

21 datatype: "json"

22})23}

24 })

其中的要點為:

1.使用jq的$.extend函式,則呼叫時只需用$.ajaxdirect(url,type,data,function(){},function(){})即可,若data無值,則傳空物件過來。

2.pack為json.stringify的封裝,即

1

//物件序列化

2function

pack(data) 56

function

unpack(data)

3.該專案在請求時需要傳token,則我在請求時在請求頭部統一加上了token,即

4.base為請求的統一字首,為公共變數,可自定義值。

呼叫示例:

get請求

1 $.ajaxdirect("/user/info",'get',{},

2function

(data) ,

5function

(data)

8 )

post請求

1 var data =

4 5 $.ajaxdirect("/farmer/farmeruser/changepassword",'post',data,

6 function(data),

9 function(data)

12 )

在這個基礎上,我們可以進一步完善封裝的ajax。

//

封裝ajax請求

$.extend(

var request =,

success: function(data)),

success: function(data),

error: function(),

datatype:

"json"})

}else

},error: function(data),

datatype:

"json"}

if(requesttype==='

pic'

)

if(requesttype==='

login')

$.ajax(request)

}})

上面的**相比第一段**增加的功能有:

1.增加了post的大小寫適配

2.增加了token過期後統一請求新的token的介面

3.增加了引數requesttype,可傳可不傳,用於區分請求的型別,從而設定請求頭的引數。

jquery實現簡單的ajax上傳

頁面如下 是乙個彈出層,使用的是easyui js檔案如下 document ready function success function data 開啟 上傳視窗 function show upload uploadwin window open action層中新增屬性 private fi...

Ajax 使用jQuery 實現Ajax

get post 方式 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title document title 6head 7 script type text j ascript src jquery.js script 8...

使用jQuery實現ajax

一 jquery提供了 ajax 方法,利用此方法我們可以輕鬆發起ajax請求 ajax options 方法 json中的每個結構單元均由花括號 表示,每個結構中可以包含多個由逗號 分割的成員,而每個成員均是乙個 鍵 值 對。值不僅可以是普通的字串,也可以是乙個有序列表,用方括號標識,其中可以包含...