我的前端自學 JQuery中的Ajax

2021-10-22 16:14:22 字數 2431 閱讀 5052

一、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除了咱們上面講解的常用知識點之...