一、jquery中提供了$.ajax()方法用於傳送ajax請求,在傳送ajax請求時,只要呼叫這個方法就可以了,在方法中需要傳遞乙個物件作為引數,這個引數就是用來配置ajax請求的。
$.
ajax()
data:
, contenttype:
,// 在請求傳送前呼叫的函式
beforesend:
function()
,// 請求成功呼叫的函式 如果伺服器端返回的資料為json字串,ajax函式會自動將json字串轉換為json物件
success:
function()
,// 請求失敗呼叫的函式
error:
function()
})
二、 serialize方法
serialize方法可以將表單中的資料,拼接成字串型別的引數
var params =$(
'#form').
serialize()
;
>
"form"
>
type
="text"
name
="username"
>
type
="password"
name
="password"
>
type
="submit"
value
="提交"
>
form
>
>$(
'#form').
on('submit'
,function()
)script
>
body
>
serialize方法和h5提供的formdata物件沒有可比性,serialize方法僅僅用來拼接字串.
當我們需要在請求傳送前,驗證使用者提交的資料時,可以封裝乙個將serialize方法返回的字串轉換成物件的函式。jquery提供了乙個方法,serializearray(),用來將使用者輸入的表單內容儲存在陣列裡,陣列的每乙個元素都是物件,陣列包含幾個物件取決於提交的表單有幾個表單控制項,它的返回結果為
[
]
函式封裝:
function
getserializeobj()
; $.
each
(params,
function
(index,item)
)return obj;
}
三、$.ajax方法傳送jsonp請求
datatype屬性指定了ajax方法傳送的請求型別為jsonp
jsonp屬性用來修改callback的引數名稱,根據實際需求決定,預設值為callback,如果伺服器端不需要修改則不傳入此屬性
$.
ajax(}
)
四、jquery中除了$.ajax方法以外還提供了 $.get和 $.post方法
$.
get(
'/get',,
funciton
(response))$.
post
('/post',,
funciton
(response)
)
四、jquery中的全域性事件
jquery規定,全域性事件必須繫結在document身上
$
(document).on
('ajaxstart'
,function()
)$(document).on
('ajaxcomplete'
function()
)
nprogress外掛程式
外掛程式中定義了jquery中ajax請求發生和結束的效果,外掛程式中準備了css和js檔案
src=
'nprogress.js'
>
script
>
rel=
'stylesheet'
href
='nprogress.css'
/>
>
// 直接呼叫 start()或者done()來控制進度條。
$(document).on
('ajaxstart'
,function()
)$(document).on
('ajaxcomplete'
function()
)script
>
我的前端自學之路2020 12 30移動端
移動web開發 目前國內的移動端瀏覽器基本是根據webkit修改來的核心,所以相容移動端的主流瀏覽器,處理webkit核心即可。常見移動端螢幕尺寸以及dpr 視口viewport 就是瀏覽器顯示頁面內容的螢幕區域,視口可以分為布局視口 視覺視口和理想視口。理想視口 idea viewport 為了使...
jQuery 我的「 」我做主
前些天朋友讓我幫他解決乙個頁面中jquery特效的相容性問題,覺得這是乙個很容易忽略也很重要的一點,特在此記錄一下。通過一點點的排查,我發現那兩個可以顯示的特效引用的是jquery,而不顯示的那個特效引用的是這個prototype.js。稍一分析,終於找到了出錯的關鍵 jquery中的 和proto...
前端 jQuery的補充
jquery除了咱們上面講解的常用知識點之外,還有jquery 外掛程式 jqueryui知識點 jqueryui 官網 jqueryui 中文網 jquery外掛程式內容包含 官網demo 裡面包含了jquery外掛程式效果和實現 大家可以好好的玩一下了!jquery除了咱們上面講解的常用知識點之...