ajax資料請求時新增loading

2021-09-02 23:33:53 字數 1061 閱讀 9316

首先在各位閱讀本篇部落格之前先宣告一下,因為我的**功底還不是很好,所以寫出來的**會比較零散,沒有嚴謹的邏輯,如果各位大佬發現了什麼需要修改的地方,歡迎各位大佬批評指教(抱拳)

阿賈克斯在資料請求時新增動畫效果有乙個前提條件,就是要把非同步設定為真(非同步請求),因為ajax非同步的設定為假時瀏覽器的渲染(ui)執行緒和js執行緒是互斥的,在執行js耗時操作時,頁面渲染會被阻塞掉。當我們執行非同步ajax的時候沒有問題,但當設定為同步請求時,其他的動作(ajax函式後面的**,還有渲染執行緒)都會停止下來。即使dom操作語句是在發起請求的前一句,這個同步請求也會「迅速」將ui執行緒阻塞,不給它執行的時間。造成**失效。

下面是我寫的乙個ajax請求時的載入動畫,動畫效果是應用的gif

html部分:

資料傳輸中,請稍後

css部分

.loading-box

.loading

.loading-text

.loading-text h4

.loading-img

.loading-img img

.loading-tips

.loading-tips small

js部分

function uploadpage() ,

async:true,

datatype:"html",

beforesend:function(),

complete:function(),

success:function (data) ,

error:function (data) })}

關於動畫部分主要看的是beforesend和complete,

其中beforesend方法,用於在向伺服器傳送請求前新增一些處理函式。這是乙個ajax事件,在ajax請求開始之前就被觸發

complete 方法執行完後呼叫

所以我顯示loading動畫的方法就是在ajax傳送請求請求之前把之前寫的html頁面顯示出來,載入完成之後再隱藏就好啦

Ajax請求資料時新增遮罩

1,ajax請求時新增遮罩 專案常常會遇到ajax傳送資料,這個過程有一定的時間等待,在這個等待時間我們可以新增乙個遮罩,讓產品更具有人性化 特別注意 ajax 如果採用 sync false 那麼遮罩不能夠顯示,不可以是同步的,這是乙個致命的弊端 2,ajax傳送非同步請求 beforesend方...

ajax 請求時,如何解釋 json資料?

在原生中解析json資料我們需要用到json.parse xhr.responsetext 使用 eval 方法 var jsondate var jsonobj eval jsondate eval方法和json.parse方法有一些區別 var jsondate var jsonobj eval...

ajax請求時前端報400

報錯資訊 bad request the browser or proxy sent a request that this server could not understand.post請求 引數是否一致 post請求 引數型別是否一致 例如上圖 uuid和user都是必填項,值傳遞乙個引數肯定...